fix(fields): always show scrollbar on table

Author: jourdain

src/e3sm_quickview/components/drawers.py

@@ -145,7 +145,7 @@ def __init__(self, load_variables=None):
                             items=("variables_listing", []),
                             height=["var_selection_size?.size.height || '30vh'"],
                             style="user-select: none; cursor: pointer;top:0;left:0;",
-                            classes="position-absolute",
+                            classes="position-absolute show-scrollbar",
                             hover=True,
                             search=("variables_filter", ""),
                             items_per_page=-1,

src/e3sm_quickview/module/__init__.py

@@ -4,3 +4,4 @@
 
 serve = {"quick_view": str(Path(__file__).with_name("serve").resolve())}
 scripts = ["quick_view/utils.js"]
+styles = ["quick_view/style.css"]

src/e3sm_quickview/module/serve/style.css

@@ -0,0 +1,16 @@
+.show-scrollbar ::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 10px; /* or height for horizontal */
+}
+
+/* Styles the draggable part of the scrollbar */
+.show-scrollbar ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* Styles the track (the area the thumb moves within) */
+.show-scrollbar ::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 5px;
+}