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]>
oxidecomputer · Jan 29, 2024 · ca7c85d · ca7c85d
1 parent 28598e1
commit ca7c85d
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/app/pages/SiloUtilizationPage.tsx b/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}

diff --git a/app/pages/project/instances/instance/tabs/MetricsTab.tsx b/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}

diff --git a/app/pages/system/UtilizationPage.tsx b/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}

diff --git a/libs/ui/lib/listbox/Listbox.tsx b/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