From c4b13c6937a2b6596c8e0622e7b9f7b6ff3f809a Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Sun, 28 Jan 2024 10:11:32 -0800
Subject: [PATCH 1/3] Tweak CSS to remove awkward line wrapping; widen select
 box

---
 app/pages/SiloUtilizationPage.tsx                        | 2 +-
 app/pages/project/instances/instance/tabs/MetricsTab.tsx | 2 +-
 app/pages/system/UtilizationPage.tsx                     | 2 +-
 libs/ui/lib/listbox/Listbox.tsx                          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/pages/SiloUtilizationPage.tsx b/app/pages/SiloUtilizationPage.tsx
index 7df394d28b..732479c596 100644
--- 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-80"
           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
index 67170bb721..14bf0f75fd 100644
--- 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-80"
           aria-label="Choose disk"
           name="disk-name"
           selected={diskName}
diff --git a/app/pages/system/UtilizationPage.tsx b/app/pages/system/UtilizationPage.tsx
index 5acbf76d2a..6877abbf30 100644
--- 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-80"
           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
index 78c31dc2bd..ee6d18945c 100644
--- 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 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

From 32e93728412b9e9f929ad350528b7ccf99abb75e Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Mon, 29 Jan 2024 12:36:08 +0000
Subject: [PATCH 2/3] Use `w-64`

---
 app/pages/SiloUtilizationPage.tsx                        | 2 +-
 app/pages/project/instances/instance/tabs/MetricsTab.tsx | 2 +-
 app/pages/system/UtilizationPage.tsx                     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/pages/SiloUtilizationPage.tsx b/app/pages/SiloUtilizationPage.tsx
index 732479c596..02874967bf 100644
--- 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-80"
+          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
index 14bf0f75fd..6724f4e9c4 100644
--- 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-80"
+          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
index 6877abbf30..6c60720a34 100644
--- 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-80"
+          className="w-64"
           aria-labelledby="filter-id-label"
           name="filter-id"
           items={siloItems}

From 6467c7a37ef773be9284c50784e1f84f095c7065 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Mon, 29 Jan 2024 12:36:15 +0000
Subject: [PATCH 3/3] Overflow with ellipsis

---
 libs/ui/lib/listbox/Listbox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/lib/listbox/Listbox.tsx b/libs/ui/lib/listbox/Listbox.tsx
index ee6d18945c..945067d668 100644
--- 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 overflow-hidden whitespace-pre 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