From d028e63a74c1f66746b972b75629503b1e9631c5 Mon Sep 17 00:00:00 2001
From: Jz0ojiang <hi@im0o.top>
Date: Tue, 11 Aug 2026 17:52:00 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E9=A1=B5=E5=8F=8C=E5=88=97?=
 =?UTF-8?q?=E8=BD=AC=E5=8D=95=E5=88=97=E6=94=B9=E6=8C=89=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E5=8C=BA=E5=AE=BD=E5=BA=A6=E5=88=A4=E6=96=AD=EF=BC=8C=E9=98=88?=
 =?UTF-8?q?=E5=80=BC=E7=AD=89=E6=95=88=E6=8F=90=E9=AB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原来按视口 900px 切换，侧栏收拢与否会让同一视口下的内容区差出一百多
像素，且用户实测切换时右列已经太窄。改成容器查询，内容区 900px 以下
转单列，等效视口阈值提高到约 1100-1160。
---
 web/views/RouterPage.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/views/RouterPage.vue b/web/views/RouterPage.vue
index 8c7268f..6beeaa2 100644
--- a/web/views/RouterPage.vue
+++ b/web/views/RouterPage.vue
@@ -390,7 +390,7 @@ async function removeConfirmed() {
   margin-bottom: var(--s-4);
 }
 
-/* 左列表右详情。窄屏时改成上下，详情不再吸顶 */
+/* 左列表右详情。窄时改成上下，详情不再吸顶 */
 .split {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
@@ -398,7 +398,13 @@ async function removeConfirmed() {
   align-items: start;
 }
 
-@media (max-width: 900px) {
+/* 按内容区宽度切换而不是按视口：侧栏能收拢，同一个视口宽度下内容区可宽可窄。
+   900px 时右列还有约 380px，再窄详情就挤得难用了 */
+.page {
+  container-type: inline-size;
+}
+
+@container (max-width: 900px) {
   .split {
     grid-template-columns: 1fr;
   }