From 3feae77c69bf6aaeac0970cd5c4e93d19319f287 Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Fri, 25 Sep 2026 11:42:15 +0800
Subject: [PATCH] fix(web): widen desktop note gutters and shrink the outline

Desktop reading gutters grow from 40px to 96px, and outline items drop from 13px to 12px.
---
 apps/web/src/components/EditorOutline.tsx                | 2 +-
 apps/web/src/components/EditorPane.tsx                   | 2 +-
 apps/web/src/components/MemoEditorChromeDensity.ts       | 2 +-
 apps/web/src/components/MemoEditorHeaderActions.test.mjs | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/EditorOutline.tsx b/apps/web/src/components/EditorOutline.tsx
index 1e9e014d..b73351f2 100644
--- a/apps/web/src/components/EditorOutline.tsx
+++ b/apps/web/src/components/EditorOutline.tsx
@@ -203,7 +203,7 @@ export const EditorOutline = ({ editor, scrollContainer, collapsed, shortcutLabe
           <li key={item.pos}>
             <div
               className={cn(
-                "group flex min-h-8 items-center rounded-[6px] pr-2 text-[13px] leading-5 transition-colors duration-150",
+                "group flex min-h-8 items-center rounded-[6px] pr-2 text-[12px] leading-5 transition-colors duration-150",
                 isActive
                   ? "bg-slate-100 text-slate-900"
                   : "text-slate-700 hover:bg-slate-50/70 hover:text-slate-900"
diff --git a/apps/web/src/components/EditorPane.tsx b/apps/web/src/components/EditorPane.tsx
index 7c2fe43f..38d69ec0 100644
--- a/apps/web/src/components/EditorPane.tsx
+++ b/apps/web/src/components/EditorPane.tsx
@@ -4047,7 +4047,7 @@ const RichEditorPane = ({
             "flex gap-8 transition-all duration-200",
             useMarkdownSourceEditor
               ? "h-full min-h-0 flex-1 items-stretch px-0 py-0"
-              : "min-h-full items-start px-4 py-2 sm:px-7 lg:px-10",
+              : "min-h-full items-start px-4 py-2 sm:px-7 lg:px-24",
             desktopFocusMode
               ? "mx-auto w-full max-w-[1400px] justify-center"
               : editorContentAlignment === "center"
diff --git a/apps/web/src/components/MemoEditorChromeDensity.ts b/apps/web/src/components/MemoEditorChromeDensity.ts
index f56924dd..81796e42 100644
--- a/apps/web/src/components/MemoEditorChromeDensity.ts
+++ b/apps/web/src/components/MemoEditorChromeDensity.ts
@@ -9,4 +9,4 @@ export const MEMO_EDITOR_TOOLBAR_COLLAPSED_CLASS_NAME =
   "max-h-12 overflow-hidden sm:max-h-9";
 
 export const MEMO_EDITOR_TITLE_REGION_CLASS_NAME =
-  "space-y-1.5 px-4 pb-2.5 pt-2.5 sm:space-y-3 sm:px-7 sm:pb-4 sm:pt-4 lg:space-y-0 lg:px-10 lg:py-0";
+  "space-y-1.5 px-4 pb-2.5 pt-2.5 sm:space-y-3 sm:px-7 sm:pb-4 sm:pt-4 lg:space-y-0 lg:px-24 lg:py-0";
diff --git a/apps/web/src/components/MemoEditorHeaderActions.test.mjs b/apps/web/src/components/MemoEditorHeaderActions.test.mjs
index d04f74b7..1ae0f054 100644
--- a/apps/web/src/components/MemoEditorHeaderActions.test.mjs
+++ b/apps/web/src/components/MemoEditorHeaderActions.test.mjs
@@ -69,13 +69,13 @@ describe("shared memo editor header actions", () => {
     expect(densitySource).toContain("max-h-12 overflow-hidden sm:max-h-9");
     expect(densitySource.match(/MEMO_EDITOR_TOP_ROW_CLASS_NAME =\s*"([^"]+)"/)?.[1]).not.toContain("sm:px-7");
     expect(densitySource.match(/MEMO_EDITOR_TOOLBAR_PADDING_CLASS_NAME =\s*"([^"]+)"/)?.[1]).not.toContain("sm:px-7");
-    expect(densitySource).toContain("lg:space-y-0 lg:px-10 lg:py-0");
+    expect(densitySource).toContain("lg:space-y-0 lg:px-24 lg:py-0");
     expect(densitySource).not.toContain("min-[1600px]:flex");
   });
 
   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("min-h-full items-start px-4 py-2 sm:px-7 lg:px-24");
+    expect(densitySource).toContain("sm:px-7 sm:pb-4 sm:pt-4 lg:space-y-0 lg:px-24 lg:py-0");
     expect(editorSource).toContain("overflow-y-auto lg:[scrollbar-gutter:stable_both-edges]");
   });
 });