Tweak CSS to remove awkward line wrapping; widen select box (#1917)

* Tweak CSS to remove awkward line wrapping; widen select box

* Use `w-64`

* Overflow with ellipsis

---------

Co-authored-by: Benjamin Leonard <[email protected]>

Author: charliepark

app/pages/SiloUtilizationPage.tsx

@@ -82,7 +82,7 @@ export function SiloUtilizationPage() {
       <div className="mb-3 mt-8 flex justify-between gap-3">
         <Listbox
           selected={filterId}
-          className="w-48"
+          className="w-64"
           aria-labelledby="filter-id-label"
           name="filter-id"
           items={projectItems}

app/pages/project/instances/instance/tabs/MetricsTab.tsx

@@ -135,7 +135,7 @@ export function MetricsTab() {
     <>
       <div className="mb-4 flex justify-between">
         <Listbox
-          className="w-48"
+          className="w-64"
           aria-label="Choose disk"
           name="disk-name"
           selected={diskName}

app/pages/system/UtilizationPage.tsx

@@ -108,7 +108,7 @@ const MetricsTab = () => {
       <div className="mb-3 mt-8 flex justify-between gap-3">
         <Listbox
           selected={filterId}
-          className="w-48"
+          className="w-64"
           aria-labelledby="filter-id-label"
           name="filter-id"
           items={siloItems}

libs/ui/lib/listbox/Listbox.tsx

@@ -126,7 +126,7 @@ export const Listbox = <Value extends string = string>({
               )}
               {...props}
             >
-              <div className="w-full px-3 text-left">
+              <div className="w-full overflow-hidden overflow-ellipsis whitespace-pre px-3 text-left">
                 {selectedItem ? (
                   // labelString is one line, which is what we need when label is a ReactNode
                   selectedItem.labelString || selectedItem.label