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}
     />