From 69bc886f72d2c960f6232c69eb1c2bca76bf787d Mon Sep 17 00:00:00 2001
From: Yuvraj Patadia <ypatadia@eightfold.ai>
Date: Thu, 1 May 2025 03:25:58 -0700
Subject: [PATCH] fix: pill visibility on small screens

---
 src/components/Select/Select.tsx   |  5 +++--
 src/hooks/useMaxVisibleSections.ts | 24 ++++++++++++++++++++++--
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index e38c6b77d..4d5b0b5b6 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -192,10 +192,10 @@ export const Select: FC<SelectProps> = React.forwardRef(
       return (options || []).filter((option: SelectOption) => option.selected);
     };
 
-    const { count, filled, width } = useMaxVisibleSections(
+    const { count, filled, width, maxPillWidth } = useMaxVisibleSections(
       inputRef,
       pillRefs,
-      168,
+      144,
       8,
       1,
       getSelectedOptionValues().length
@@ -589,6 +589,7 @@ export const Select: FC<SelectProps> = React.forwardRef(
             type={readonly ? PillType.default : PillType.closable}
             style={{
               visibility: index < count ? 'visible' : 'hidden',
+              maxWidth: `${maxPillWidth}px`,
             }}
             {...pillProps}
           />
diff --git a/src/hooks/useMaxVisibleSections.ts b/src/hooks/useMaxVisibleSections.ts
index 09995ac8c..6b9fe2f1a 100644
--- a/src/hooks/useMaxVisibleSections.ts
+++ b/src/hooks/useMaxVisibleSections.ts
@@ -14,18 +14,37 @@ export const useMaxVisibleSections = (
     width: 0,
     count: 0,
     filled: false,
+    maxPillWidth: 144,
   });
 
   const computeVisibleSections = () => {
+    const selectedItemsLength = itemsRef.current?.filter(Boolean)?.length;
+    if (selectedItemsLength === 0) return;
+    const containerWidth =
+      containerRef.current?.getBoundingClientRect().width ?? 0;
+    const firstItemWidth =
+      itemsRef.current?.[0]?.getBoundingClientRect().width ?? extraItemWidth;
+
+    const isSingleItem = selectedItemsLength === 1;
+    const isNarrowContainer = isSingleItem
+      ? containerWidth <= 210
+      : containerWidth <= 350;
+
+    const updatedExtraItemWidth = isSingleItem
+      ? 40
+      : isNarrowContainer
+      ? containerWidth * 0.45
+      : firstItemWidth + 24;
+    const maxPillWidth = isNarrowContainer ? 100 : 144;
     const availableWidth: number =
-      (containerRef.current?.getBoundingClientRect().width - extraItemWidth) *
-      linesToShow;
+      (containerWidth - updatedExtraItemWidth) * linesToShow;
     const sections = itemsRef.current?.reduce(
       (
         acc: {
           width: number;
           count: number;
           filled: boolean;
+          maxPillWidth: number;
         },
         ref: HTMLElement
       ) => {
@@ -45,6 +64,7 @@ export const useMaxVisibleSections = (
         width: 0,
         count: 0,
         filled: false,
+        maxPillWidth: maxPillWidth,
       }
     );
     setMaxSections(sections);