fix(filter): Set max height for the log-level listbox and refine styl…

…ing (fixes #150). (#155)
y-scope · Jan 6, 2025 · 5b368b9 · 5b368b9
1 parent 5a3bd10
commit 5b368b9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/StatusBar/LogLevelSelect/index.css b/src/components/StatusBar/LogLevelSelect/index.css
@@ -21,8 +21,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 {

diff --git 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},
+                    ],
                 },
             }}
         >