From 61bca0642e9fec3230dfb4e22a688434bfa880d9 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra <rameshkumar2299@gmail.com>
Date: Tue, 7 Nov 2023 15:56:52 +0530
Subject: [PATCH 1/3] chore: kanban card lable drop down items overflow

---
 .../issue-layouts/properties/labels.tsx       | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 596237ef468..1f285294d1a 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,7 +93,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   });
 
   const label = (
-    <div className="flex items-center gap-2 text-custom-text-200 h-full">
+    <div className="overflow-hidden flex items-center gap-2 text-custom-text-200 h-full w-full">
       {value.length > 0 ? (
         value.length <= maxRender ? (
           <>
@@ -102,16 +102,18 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
               .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"
+                  className="overflow-hidden 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"
                 >
-                  <div className="flex items-center gap-1.5 text-custom-text-200">
+                  <div className="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",
                       }}
                     />
-                    {label.name}
+                    <div className="flex-shrink-0 truncate line-clamp-1 inline-bloc">
+                      {label.name}
+                    </div>
                   </div>
                 </div>
               ))}
@@ -135,9 +137,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 +149,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,16 +159,16 @@ 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}
+
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
         </button>
       </Combobox.Button>
@@ -198,15 +199,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>

From 7803ea675eddd7498698e26a56f6ad6726a26455 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra <rameshkumar2299@gmail.com>
Date: Wed, 8 Nov 2023 12:54:05 +0530
Subject: [PATCH 2/3] style: kaban card label text overflow, tool tip, hover
 cursor

---
 .../issue-layouts/properties/labels.tsx       | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index a8bd5617b4c..4ee3127ef7d 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -93,33 +93,39 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   });
 
   const label = (
-    <div className="flex items-center gap-2 text-custom-text-200">
+    <div className="flex flex-wrap items-center 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="overflow-hidden 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 max-w-full">
-                    <span
-                      className="h-2 w-2 flex-shrink-0 rounded-full"
-                      style={{
-                        backgroundColor: label?.color ?? "#000000",
-                      }}
-                    />
-                    <div className="flex-shrink-0 truncate line-clamp-1 inline-bloc">
-                      {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">
+                        {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"
@@ -168,7 +174,6 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           onClick={() => !projectLabels && fetchProjectLabels()}
         >
           {label}
-
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
         </button>
       </Combobox.Button>

From 09c4e4273351bec37bf607dd1ab76fe8eaedeb00 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra <rameshkumar2299@gmail.com>
Date: Wed, 8 Nov 2023 15:44:41 +0530
Subject: [PATCH 3/3] style: label overflow in list layout

---
 web/components/issues/issue-layouts/properties/labels.tsx | 4 ++--
 web/components/issues/issue-layouts/properties/state.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 4ee3127ef7d..7e91e87883f 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -93,7 +93,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   });
 
   const label = (
-    <div className="flex flex-wrap items-center gap-2 text-custom-text-200 w-full">
+    <div className="overflow-hidden flex flex-wrap items-center gap-2 text-custom-text-200 w-full">
       {value.length > 0 ? (
         value.length <= maxRender ? (
           <>
@@ -116,7 +116,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                           backgroundColor: label?.color ?? "#000000",
                         }}
                       />
-                      <div className="truncate line-clamp-1 inline-block">
+                      <div className="truncate line-clamp-1 inline-block w-auto max-w-[100px]">
                         {label.name}
                       </div>
                     </div>
diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx
index 62bd2a45c46..dde5f1ae5fc 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);