From 5c0c1864466e4ccce07affc1f6fc39b242d52aa0 Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Mon, 14 Sep 2026 23:25:39 +0800
Subject: [PATCH] fix(web): keep desktop note gutters even when a scrollbar is
 present

Reserve matching left and right scrollbar lanes so the outline no longer sits under the scroller.
---
 apps/web/src/components/EditorPane.tsx                   | 2 +-
 apps/web/src/components/MemoEditorHeaderActions.test.mjs | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/EditorPane.tsx b/apps/web/src/components/EditorPane.tsx
index 521998ff..33f41392 100644
--- a/apps/web/src/components/EditorPane.tsx
+++ b/apps/web/src/components/EditorPane.tsx
@@ -4229,7 +4229,7 @@ const RichEditorPane = ({
             : useMarkdownSourceEditor
               // Source mode: fill the pane and scroll inside the textarea (not a 300px card).
               ? "flex flex-col overflow-hidden"
-              : "overflow-y-auto"
+              : "overflow-y-auto lg:[scrollbar-gutter:stable_both-edges]"
         )}
       >
         {!isNamedEditorTheme(editorTheme) && customEditorTheme.customCss && (
diff --git a/apps/web/src/components/MemoEditorHeaderActions.test.mjs b/apps/web/src/components/MemoEditorHeaderActions.test.mjs
index 4a6d8dd5..8252d0be 100644
--- a/apps/web/src/components/MemoEditorHeaderActions.test.mjs
+++ b/apps/web/src/components/MemoEditorHeaderActions.test.mjs
@@ -74,5 +74,6 @@ describe("shared memo editor header actions", () => {
   test("keeps Evernote-like desktop reading gutters aligned with the title", () => {
     expect(editorSource).toContain("min-h-full items-start px-4 py-2 sm:px-7 lg:px-10");
     expect(densitySource).toContain("sm:px-7 sm:pb-4 sm:pt-4 lg:space-y-0 lg:px-10 lg:py-0");
+    expect(editorSource).toContain("overflow-y-auto lg:[scrollbar-gutter:stable_both-edges]");
   });
 });