From 55a4dbf9eb80faa602bbad11a2d2f2dfe2da3a7f Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Sat, 29 Aug 2026 21:15:32 +0800
Subject: [PATCH] fix(web): align memo list gutters

---
 apps/web/src/components/MemoListPane.test.mjs | 8 ++++++++
 apps/web/src/components/MemoListPane.tsx      | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/MemoListPane.test.mjs b/apps/web/src/components/MemoListPane.test.mjs
index dc4d0975..3de475cb 100644
--- a/apps/web/src/components/MemoListPane.test.mjs
+++ b/apps/web/src/components/MemoListPane.test.mjs
@@ -11,3 +11,11 @@ describe("memo context menu", () => {
     expect(source).not.toContain("contextMoveOpen");
   });
 });
+
+describe("desktop memo list spacing", () => {
+  test("reserves matching desktop scrollbar gutters on both sides", () => {
+    const source = readFileSync(new URL("./MemoListPane.tsx", import.meta.url), "utf8");
+
+    expect(source).toContain("lg:px-0 lg:pb-3 lg:[scrollbar-gutter:stable_both-edges]");
+  });
+});
diff --git a/apps/web/src/components/MemoListPane.tsx b/apps/web/src/components/MemoListPane.tsx
index 78f7451d..6730028e 100644
--- a/apps/web/src/components/MemoListPane.tsx
+++ b/apps/web/src/components/MemoListPane.tsx
@@ -1367,7 +1367,7 @@ export const MemoListPane = ({
 
       <div
         ref={listScrollRef}
-        className="relative min-h-0 flex-1 overflow-y-auto p-3 pb-[calc(7rem+env(safe-area-inset-bottom))] lg:pb-3 lg:pr-3"
+        className="relative min-h-0 flex-1 overflow-y-auto p-3 pb-[calc(7rem+env(safe-area-inset-bottom))] lg:px-0 lg:pb-3 lg:[scrollbar-gutter:stable_both-edges]"
       >
         {isLoading || (isRefreshing && memos.length === 0) ? (
           <div className="px-2 py-4 text-sm text-slate-500">{t("memoList.fetchingLatest")}</div>