stable scrollbars

Author: shakyShane

special-pages/pages/history/app/components/App.jsx

@@ -17,8 +17,10 @@ import { useSearchCommitForRange } from '../global/hooks/useSearchCommitForRange
 import { useURLReflection } from '../global/hooks/useURLReflection.js';
 import { useSearchCommit } from '../global/hooks/useSearchCommit.js';
 import { useRangesData } from '../global/Providers/HistoryServiceProvider.js';
+import { usePlatformName } from '../types.js';
 
 export function App() {
+    const platformName = usePlatformName();
     const mainRef = useRef(/** @type {HTMLElement|null} */ (null));
     const { isDarkMode } = useEnv();
     const ranges = useRangesData();
@@ -58,7 +60,7 @@ export function App() {
     }, [onKeyDown, query]);
 
     return (
-        <div class={styles.layout} data-theme={isDarkMode ? 'dark' : 'light'}>
+        <div class={styles.layout} data-theme={isDarkMode ? 'dark' : 'light'} data-platform={platformName}>
             <aside class={styles.aside}>
                 <Sidebar ranges={ranges} />
             </aside>

special-pages/pages/history/app/components/App.module.css

@@ -10,8 +10,13 @@ body {
 }
 
 .layout {
+    --sidebar-width: 250px;
+    --main-padding-left: 48px;
+    --main-padding-right: 76px;
+    --windows-scrollbar: 15px;
+
     display: grid;
-    grid-template-columns: 250px 1fr;
+    grid-template-columns: var(--sidebar-width) 1fr;
     grid-template-rows: max-content 1fr;
     grid-template-areas:
             'aside header'
@@ -22,8 +27,8 @@ body {
 }
 .header {
     grid-area: header;
-    padding-left: 48px;
-    padding-right: 76px;
+    padding-left: var(--main-padding-left);
+    padding-right: var(--main-padding-right);
 }
 .search {
     justify-self: flex-end;
@@ -36,24 +41,17 @@ body {
 .main {
     grid-area: main;
     overflow: auto;
-    padding-left: 48px;
-    padding-right: 76px;
+    padding-left: var(--main-padding-left);
+    padding-right: var(--main-padding-right);
     padding-top: 24px;
 }
-
 .customScroller {
     overflow-y: scroll;
-    &::-webkit-scrollbar {
-        width: 12px;
-    }
-
-    &::-webkit-scrollbar-track {
-        border-radius: 6px;
-    }
+    scrollbar-gutter: stable;
+}
 
-    &::-webkit-scrollbar-thumb {
-        background: rgb(108, 108, 108);
-        border: 4px solid var(--history-background-color);
-        border-radius: 6px;
+[data-platform="windows"] {
+    .customScroller {
+        padding-right: calc(var(--main-padding-right) - var(--windows-scrollbar));
     }
 }

special-pages/pages/history/src/index.js

@@ -56,7 +56,7 @@ export class HistoryPage {
     }
 }
 
-const baseEnvironment = new Environment().withInjectName(document.documentElement.dataset.platform).withEnv(import.meta.env);
+const baseEnvironment = new Environment().withInjectName(import.meta.injectName).withEnv(import.meta.env);
 
 const messaging = createSpecialPageMessaging({
     injectName: baseEnvironment.injectName,