scroll fixes

internal/embedfs/web/css/input.css

@@ -129,72 +129,29 @@
 }
 
 /* Custom Scrollbar Styles - Catppuccin Theme */
+/* Only applied to specific elements (viewport, dropdowns, modals) to avoid
+   overriding the browser default scrollbar on the html/body level */
 
-/* Firefox */
-* {
+/* Main content viewport */
+#page-viewport {
+  --scrollbar-thumb: var(--overlay0);
+  --scrollbar-track: var(--base);
+  scrollbar-width: normal;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* Multi-select dropdowns */
+.multi-select-dropdown {
+  --scrollbar-thumb: var(--surface2);
+  --scrollbar-track: var(--base);
   scrollbar-width: thin;
-  scrollbar-color: var(--surface1) var(--mantle);
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
 
-/* Webkit browsers (Chrome, Safari, Edge) */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--mantle);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--surface1);
-  border-radius: 4px;
-  border: 2px solid var(--mantle);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--surface2);
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: var(--overlay0);
-}
-
-/* Specific styling for multi-select dropdowns */
-.multi-select-dropdown::-webkit-scrollbar {
-  width: 6px;
-}
-
-.multi-select-dropdown::-webkit-scrollbar-track {
-  background: var(--base);
-  border-radius: 3px;
-}
-
-.multi-select-dropdown::-webkit-scrollbar-thumb {
-  background: var(--surface2);
-  border-radius: 3px;
-  border: 1px solid var(--base);
-}
-
-.multi-select-dropdown::-webkit-scrollbar-thumb:hover {
-  background: var(--overlay0);
-}
-
-/* Specific styling for modal content */
-.modal-scrollable::-webkit-scrollbar {
-  width: 8px;
-}
-
-.modal-scrollable::-webkit-scrollbar-track {
-  background: var(--base);
-}
-
-.modal-scrollable::-webkit-scrollbar-thumb {
-  background: var(--surface1);
-  border-radius: 4px;
-}
-
-.modal-scrollable::-webkit-scrollbar-thumb:hover {
-  background: var(--surface2);
+/* Modal content */
+.modal-scrollable {
+  --scrollbar-thumb: var(--surface1);
+  --scrollbar-track: var(--base);
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }