fix: module and cycle applied filters overflow fix

makeplane · Apr 18, 2024 · c727ff9 · c727ff9
1 parent 274bad8
commit c727ff9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx b/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
@@ -28,9 +28,9 @@ export const AppliedCycleFilters: React.FC<Props> = observer((props) => {
         const cycleStatus = (cycleDetails?.status ? cycleDetails?.status.toLocaleLowerCase() : "draft") as TCycleGroups;
 
         return (
-          <div key={cycleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={cycleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs truncate">
             <CycleGroupIcon cycleGroup={cycleStatus} className="h-3 w-3 flex-shrink-0" />
-            <span className="normal-case">{cycleDetails.name}</span>
+            <span className="normal-case truncate">{cycleDetails.name}</span>
             {editable && (
               <button
                 type="button"

diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@@ -60,9 +60,9 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         return (
           <div
             key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize w-full"
           >
-            <div className="flex flex-wrap items-center gap-1.5">
+            <div className="flex flex-wrap items-center gap-1.5 w-full">
               <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
               {membersFilters.includes(filterKey) && (
                 <AppliedMembersFilters

diff --git a/web/components/issues/issue-layouts/filters/applied-filters/module.tsx b/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
@@ -24,9 +24,9 @@ export const AppliedModuleFilters: React.FC<Props> = observer((props) => {
         if (!moduleDetails) return null;
 
         return (
-          <div key={moduleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={moduleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs truncate">
             <DiceIcon className="h-3 w-3 flex-shrink-0" />
-            <span className="normal-case">{moduleDetails.name}</span>
+            <span className="normal-case truncate">{moduleDetails.name}</span>
             {editable && (
               <button
                 type="button"