From 49ad097689e3c83430de98695525d337df0c4272 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 19 Dec 2024 06:02:36 -0500 Subject: [PATCH 1/2] Set max height for log-level listbox. --- src/components/StatusBar/LogLevelSelect/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/StatusBar/LogLevelSelect/index.css b/src/components/StatusBar/LogLevelSelect/index.css index 9e17673e..5756e648 100644 --- a/src/components/StatusBar/LogLevelSelect/index.css +++ b/src/components/StatusBar/LogLevelSelect/index.css @@ -23,6 +23,7 @@ .log-level-select-listbox { /* Disallow width auto-resizing with the `Select` button. */ max-width: 0; + max-height: calc(100vh - var(--ylv-menu-bar-height) - var(--ylv-status-bar-height)) !important; } .log-level-select-option-text-tooltip { From 6a9d1105e75e08e64587b0b6fecb1a2a73176fcd Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 19 Dec 2024 06:04:20 -0500 Subject: [PATCH 2/2] Instead of prior CSS approach, disable "equalWidth" modifier to disallow width auto-resizing with the `Select` button; disable "offset" modifier to remove gap between the listbox and the button. --- src/components/StatusBar/LogLevelSelect/index.css | 2 -- src/components/StatusBar/LogLevelSelect/index.tsx | 7 +++++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/StatusBar/LogLevelSelect/index.css b/src/components/StatusBar/LogLevelSelect/index.css index 5756e648..da2e8831 100644 --- a/src/components/StatusBar/LogLevelSelect/index.css +++ b/src/components/StatusBar/LogLevelSelect/index.css @@ -21,8 +21,6 @@ } .log-level-select-listbox { - /* Disallow width auto-resizing with the `Select` button. */ - max-width: 0; max-height: calc(100vh - var(--ylv-menu-bar-height) - var(--ylv-status-bar-height)) !important; } diff --git a/src/components/StatusBar/LogLevelSelect/index.tsx b/src/components/StatusBar/LogLevelSelect/index.tsx index fe0db3fc..92ca870f 100644 --- a/src/components/StatusBar/LogLevelSelect/index.tsx +++ b/src/components/StatusBar/LogLevelSelect/index.tsx @@ -259,6 +259,13 @@ const LogLevelSelect = () => { listbox: { className: "log-level-select-listbox", placement: "top-end", + modifiers: [ + // Disallow listbox width auto-resizing with the `Select` button. + {name: "equalWidth", enabled: false}, + + // Remove gap between the listbox and the `Select` button. + {name: "offset", enabled: false}, + ], }, }} >