Add granularity to filter widths (#2183)

web/src/components/search/filtering/FilterDropdown.tsx

@@ -13,6 +13,8 @@ export function FilterDropdown({
   icon,
   defaultDisplay,
   width = "w-64",
+  dropdownWidth,
+  optionClassName,
 }: {
   options: Option[];
   selected: string[];
@@ -20,6 +22,8 @@ export function FilterDropdown({
   icon: JSX.Element;
   defaultDisplay: string | JSX.Element;
   width?: string;
+  dropdownWidth?: string;
+  optionClassName?: string;
 }) {
   return (
     <div>
@@ -27,16 +31,16 @@ export function FilterDropdown({
         dropdown={
           <div
             className={`
-          border 
-          border-border 
-          rounded-lg 
-          bg-background
-          flex 
-          flex-col 
-          ${width}
-          max-h-96 
-          overflow-y-auto 
-          overscroll-contain`}
+              border 
+              border-border 
+              rounded-lg 
+              bg-background
+              flex 
+              flex-col 
+              ${dropdownWidth || width}
+              max-h-96 
+              overflow-y-auto 
+              overscroll-contain`}
           >
             {options.map((option, ind) => {
               const isSelected = selected.includes(option.key);
@@ -44,12 +48,14 @@ export function FilterDropdown({
                 <div
                   key={option.key}
                   className={`
+                    ${optionClassName}
                     flex
-                    px-3 
-                    text-sm 
-                    py-2.5 
-                    select-none 
-                    cursor-pointer 
+                    px-3
+                    text-sm
+                    py-2.5
+                    select-none
+                    cursor-pointer
+                    w-fit
                     text-emphasis
                     hover:bg-hover-light
                     ${
@@ -76,17 +82,17 @@ export function FilterDropdown({
       >
         <div
           className={`
-        flex 
-        ${width}
-        text-sm 
-        px-3
-        py-1.5 
-        rounded-lg 
-        border 
-        gap-x-2
-        border-border
-        cursor-pointer 
-        hover:bg-hover-light`}
+            flex
+            ${width}
+            text-sm
+            px-3
+            py-1.5
+            rounded-lg 
+            border 
+            gap-x-2
+            border-border
+            cursor-pointer 
+            hover:bg-hover-light`}
         >
           <div className="flex-none my-auto">{icon}</div>
           {selected.length === 0 ? (

web/src/components/search/filtering/Filters.tsx

@@ -447,6 +447,8 @@ export function HorizontalSourceSelector({
             icon={<FiMap size={16} />}
             defaultDisplay="Sources"
             width="w-fit max-w-24 ellipsis truncate"
+            dropdownWidth="max-w-36 w-fit"
+            optionClassName="truncate break-all ellipsis"
           />
         )}
 
@@ -465,7 +467,9 @@ export function HorizontalSourceSelector({
             handleSelect={(option) => handleDocumentSetSelect(option.key)}
             icon={<FiBook size={16} />}
             defaultDisplay="Sets"
-            width="w-fit max-w-24 ellipsis"
+            width="w-fit max-w-24 ellipsis truncate"
+            dropdownWidth="max-w-36 w-fit"
+            optionClassName="truncate break-all ellipsis"
           />
         )}
 
@@ -495,7 +499,9 @@ export function HorizontalSourceSelector({
             }}
             icon={<FiTag size={16} />}
             defaultDisplay="Tags"
-            width="w-fit max-w-24 ellipsis"
+            width="w-fit max-w-24 ellipsis truncate"
+            dropdownWidth="max-w-80 w-fit"
+            optionClassName="truncate break-all ellipsis"
           />
         )}
       </div>