fix: match native scrollbars to the scroll area style

CHANGELOG.md

@@ -13,6 +13,7 @@ Leafdown uses lightweight [Keep a Changelog](https://keepachangelog.com/en/1.1.0
 
 ### Fixed
 
+- Draw the scrollbars of wide code blocks, tables, and display math in the same thin, rounded style as the rest of Leafdown instead of the system default. Help code samples, Find in folder's skipped-file lists, the code block language and wiki link suggestion lists, and menus cut short by a small window match it too.
 - Show a file opened from File Explorer, File > Open, recent files, or a drop as soon as it is read instead of after its whole folder has been scanned. A file in a large folder such as Documents could leave the window on the welcome screen for several seconds, looking as if the file had not opened. The article navigator shows placeholder rows until the folder is ready, and a folder that cannot be scanned reports its error without closing the document.
 - Show a heading's caret-based marker only while the editor has focus, so opening a heading-first document does not show the marker before you enter the editor. Hover markers and section folding remain available.
 - Keep block handles, the insertion button, and its insertion line inside the document view. A block scrolled partly out of view keeps its handle beside the part you can see, and no gutter control shows or takes clicks outside the document card.

src/app.css

@@ -242,6 +242,25 @@
     @apply bg-primary/60 text-foreground;
   }
 
+  /* Matches the ScrollArea thumb for regions that scroll natively, such as editor blocks that
+     ProseMirror renders outside React. */
+  ::-webkit-scrollbar {
+    @apply size-2.5;
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-full border border-transparent bg-border bg-clip-padding;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-foreground/30;
+  }
+
   button:not(:disabled, [aria-disabled="true"]) {
     @apply cursor-pointer;
   }

src/features/editor/components/milkdown-editor.css

@@ -547,22 +547,6 @@
 
       &[data-mermaid-mode] .leafdown-code-mermaid-panel:not([hidden]) {
         @apply block min-w-0 overflow-x-auto font-sans text-sm leading-normal whitespace-normal;
-
-        &::-webkit-scrollbar {
-          @apply h-2.5;
-        }
-
-        &::-webkit-scrollbar-track {
-          @apply bg-transparent;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          @apply rounded-full border border-transparent bg-border bg-clip-padding;
-        }
-
-        &::-webkit-scrollbar-thumb:hover {
-          @apply bg-foreground/30;
-        }
       }
 
       &[data-mermaid-mode="source"]

src/features/editor/tests/editorPresentation.test.ts

@@ -66,6 +66,16 @@ const value = 1;
     expect(editorCss).toContain("&[data-checked] {");
   });
 
+  it("leaves the editor's scrolling blocks to the app's shared scrollbar", () => {
+    const editorCss = readFileSync(editorCssPath, "utf8");
+    const appCss = readFileSync(resolve(process.cwd(), "src/app.css"), "utf8");
+
+    expect(appCss).toMatch(/::-webkit-scrollbar-thumb \{[^}]*bg-border/su);
+    expect(editorCss).not.toContain("::-webkit-scrollbar-thumb");
+    // Chromium ignores `::-webkit-scrollbar` styling on an element that sets either standard property.
+    expect(editorCss).not.toMatch(/scrollbar-(?:color|width):(?!\s*none;)/u);
+  });
+
   it("draws unsupported raw HTML as layout-neutral muted text", async () => {
     const mounted = await mountStyledEditor('<div class="note">Block</div>');
     const htmlNode = getEditorDomElement(mounted, '[data-type="html"]');