From a3ea7c8f10aa993d49617e15e47838c2b6f62502 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Sat, 25 Nov 2023 21:18:54 +0530
Subject: [PATCH] fix: issue peek overview state select dropdown overflow fix
 (#2873)

---
 web/components/issues/sidebar-select/state.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/components/issues/sidebar-select/state.tsx b/web/components/issues/sidebar-select/state.tsx
index 326a5cf48..ffa450e50 100644
--- a/web/components/issues/sidebar-select/state.tsx
+++ b/web/components/issues/sidebar-select/state.tsx
@@ -37,9 +37,9 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled
     value: state.id,
     query: state.name,
     content: (
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 truncate">
         <StateGroupIcon stateGroup={state.group} color={state.color} />
-        {state.name}
+        <span className="truncate">{state.name}</span>
       </div>
     ),
   }));
@@ -50,11 +50,11 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled
       onChange={onChange}
       options={options}
       customButton={
-        <div className="bg-custom-background-80 text-xs rounded px-2.5 py-0.5">
+        <div className="bg-custom-background-80 text-xs rounded px-2.5 py-0.5 max-w-[10rem] truncate">
           {selectedOption ? (
             <div className="flex items-center gap-1.5 text-left text-custom-text-100">
               <StateGroupIcon stateGroup={selectedOption.group} color={selectedOption.color} />
-              {addSpaceIfCamelCase(selectedOption?.name ?? "")}
+              <span className="truncate">{addSpaceIfCamelCase(selectedOption?.name ?? "")}</span>
             </div>
           ) : inboxIssueId ? (
             <div className="flex items-center gap-1.5 text-left text-custom-text-100">
@@ -66,7 +66,7 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled
           )}
         </div>
       }
-      width="min-w-[10rem]"
+      width="min-w-[10rem] max-w-[12rem]"
       noChevron
       disabled={disabled}
     />