From 2bb93f8c35d11331b66bab2d59231a76c40228c8 Mon Sep 17 00:00:00 2001
From: HooperTrs <hoap@qq.com>
Date: Thu, 16 Jul 2026 14:06:41 +0800
Subject: [PATCH] fix(web): reserve scrollbar gutter to prevent layout shift

When page content grows past the viewport, the vertical scrollbar
appearing used to shrink the layout width and nudge the left sidebar.
Reserve stable gutter space (with overflow-y: scroll fallback) so the
main layout stays put during loading and navigation.
---
 web/src/assets/css/main.less | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/web/src/assets/css/main.less b/web/src/assets/css/main.less
index 9d0f9aa9..94a74a06 100644
--- a/web/src/assets/css/main.less
+++ b/web/src/assets/css/main.less
@@ -3,6 +3,14 @@
     --content-main: 620px;
 }
 
+// Reserve vertical scrollbar space so content doesn't jump horizontally
+// when pages go from short (no bar) to tall (bar appears).
+html {
+    scrollbar-gutter: stable;
+    // Fallback for browsers without scrollbar-gutter support
+    overflow-y: scroll;
+}
+
 .app-container {
     margin: 0;