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;
   }