From bd1a850f3557603aae87b93d393ddf1862a8c377 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra
 <31303617+rameshkumarchandra@users.noreply.github.com>
Date: Wed, 8 Nov 2023 18:12:36 +0530
Subject: [PATCH] style: kanban card label overflow (#2722)

* chore: kanban card lable drop down items overflow

* style: kaban card label text overflow, tool tip, hover cursor

* style: label overflow in list layout
---
 .../issue-layouts/properties/labels.tsx       | 66 +++++++++++--------
 .../issues/issue-layouts/properties/state.tsx |  4 +-
 2 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 3f0f6552d..1b35f0495 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -65,14 +65,14 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     value: label.id,
     query: label.name,
     content: (
-      <div className="flex items-center justify-start gap-2">
+      <div className="flex items-center justify-start gap-2 overflow-hidden">
         <span
           className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
           style={{
             backgroundColor: label.color,
           }}
         />
-        <span>{label.name}</span>
+        <div className="truncate inline-block line-clamp-1">{label.name}</div>
       </div>
     ),
   }));
@@ -93,31 +93,39 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   });
 
   const label = (
-    <div className="flex items-center h-5 gap-2 text-custom-text-200">
+    <div className="overflow-hidden flex flex-wrap items-center h-5 gap-2 text-custom-text-200 w-full">
       {value.length > 0 ? (
         value.length <= maxRender ? (
           <>
             {(projectLabels ? projectLabels : [])
               ?.filter((l) => value.includes(l.id))
               .map((label) => (
-                <div
-                  key={label.id}
-                  className="flex cursor-default items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full"
+                <Tooltip
+                  position="top"
+                  tooltipHeading="Labels"
+                  tooltipContent={label.name ?? ''}
                 >
-                  <div className="flex items-center gap-1.5 text-custom-text-200">
-                    <span
-                      className="h-2 w-2 flex-shrink-0 rounded-full"
-                      style={{
-                        backgroundColor: label?.color ?? "#000000",
-                      }}
-                    />
-                    {label.name}
+                  <div
+                    key={label.id}
+                    className={`overflow-hidden flex hover:bg-custom-background-80 ${!disabled && "cursor-pointer"} items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full max-w-full`}
+                  >
+                    <div className="overflow-hidden flex items-center gap-1.5 text-custom-text-200 max-w-full">
+                      <span
+                        className="h-2 w-2 flex-shrink-0 rounded-full"
+                        style={{
+                          backgroundColor: label?.color ?? "#000000",
+                        }}
+                      />
+                      <div className="truncate line-clamp-1 inline-block w-auto max-w-[100px]">
+                        {label.name}
+                      </div>
+                    </div>
                   </div>
-                </div>
+                </Tooltip>
               ))}
           </>
         ) : (
-          <div className="h-full flex cursor-default items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs">
+          <div className="h-full flex cursor-pointer items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs">
             <Tooltip
               position="top"
               tooltipHeading="Labels"
@@ -135,9 +143,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
         )
       ) : (
         <div
-          className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${
-            noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
-          }`}
+          className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
+            }`}
         >
           Select labels
         </div>
@@ -148,7 +155,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   return (
     <Combobox
       as="div"
-      className={`flex-shrink-0 text-left ${className}`}
+      className={`flex-shrink-0 text-left w-auto max-w-full ${className}`}
       value={value}
       onChange={onChange}
       disabled={disabled}
@@ -158,13 +165,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
         <button
           ref={setReferenceElement}
           type="button"
-          className={`flex items-center justify-between gap-1 w-full text-xs ${
-            disabled
-              ? "cursor-not-allowed text-custom-text-200"
-              : value.length <= maxRender
+          className={`flex items-center justify-between gap-1 w-full text-xs ${disabled
+            ? "cursor-not-allowed text-custom-text-200"
+            : value.length <= maxRender
               ? "cursor-pointer"
               : "cursor-pointer hover:bg-custom-background-80"
-          }  ${buttonClassName}`}
+            }  ${buttonClassName}`}
           onClick={() => !projectLabels && fetchProjectLabels()}
         >
           {label}
@@ -198,15 +204,19 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                   key={option.value}
                   value={option.value}
                   className={({ active, selected }) =>
-                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                      active ? "bg-custom-background-80" : ""
+                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${active ? "bg-custom-background-80" : ""
                     } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                   }
                 >
                   {({ selected }) => (
                     <>
                       {option.content}
-                      {selected && <Check className={`h-3.5 w-3.5`} />}
+                      {selected &&
+                        <div className="flex-shrink-0">
+
+                          <Check className={`h-3.5 w-3.5`} />
+                        </div>
+                      }
                     </>
                   )}
                 </Combobox.Option>
diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx
index 1fcd5257e..2a6b50d7c 100644
--- a/web/components/issues/issue-layouts/properties/state.tsx
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@@ -94,7 +94,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
     <Tooltip tooltipHeading="State" tooltipContent={value?.name ?? ""} position="top">
       <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
         {value && <StateGroupIcon stateGroup={value.group} color={value.color} />}
-        <span className="truncate line-clamp-1 inline-block">{value?.name ?? "State"}</span>
+        <span className="truncate line-clamp-1 inline-block w-auto max-w-[100px]">{value?.name ?? "State"}</span>
       </div>
     </Tooltip>
   );
@@ -104,7 +104,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
       {workspaceSlug && projectId && (
         <Combobox
           as="div"
-          className={`flex-shrink-0 text-left w-auto max-w-full ${className}`}
+          className={`text-left w-auto max-w-full ${className}`}
           value={value.id}
           onChange={(data: string) => {
             const selectedState = projectStates?.find((state) => state.id === data);