Fixed menus in dialogs in firefox

Also improved look of scrollbars incl. dark mode

app/imports/client/ui/dialogStack/DialogStack.vue

@@ -63,21 +63,14 @@
     },
     watch: {
       dialogs(newDialogs) {
-        let el = document.documentElement;
+        const el = document.documentElement;
         if (newDialogs.length) {
           this.top = el.scrollTop;
           if (el.scrollHeight > el.clientHeight){
-            el.style.position = 'fixed';
-            el.style.top = `${-this.top}px`;
-            el.style.left = 0;
-            el.style.right = 0;
-            el.style.overflowY = 'scroll';
+            el.style.overflowY = 'hidden';
+            el.scrollTop = this.top;
           }
         } else {
-          el.style.position = null;
-          el.style.top = null;
-          el.style.left = null;
-          el.style.right = null;
           el.style.overflowY = null;
           el.scrollTop = this.top;
         }

app/imports/client/ui/styles/body.css

@@ -0,0 +1,37 @@
+html {
+  --scrollbarBG: #f0f0f0;
+  --thumbBG: #cdcdcd;
+  scrollbar-gutter: stable;
+  background-color: var(--scrollbarBG);
+}
+
+html:has(#app.theme--dark) {
+  --scrollbarBG: #212121;
+  --thumbBG: #404040;
+}
+
+#app.theme--dark {
+  --scrollbarBG: #212121;
+  --thumbBG: #404040;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--scrollbarBG);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--thumbBG);
+}
+
+::-webkit-scrollbar-corner {
+  background-color: rgba(0, 0, 0, 0);
+}

app/imports/client/ui/styles/stylesIndex.js

@@ -1,3 +1,4 @@
+import './body.css';
 import './cardColors.css';
 import './cardTitles.css';
 import './centeredInputs.css';