From c6458eb373943d8158c18f7e15cf39a80bbf6de9 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 19 Oct 2026 21:37:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8F=90=E4=BA=A4=E5=88=97=E8=A1=A8):=20?=
 =?UTF-8?q?=E5=B1=8F=E7=AA=84=E6=88=96=E6=B5=8F=E8=A7=88=E5=99=A8=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7=E6=97=B6=EF=BC=8C=E5=8F=B3=E6=A0=8F=E9=A1=B6=E4=B8=8A?=
 =?UTF-8?q?=E7=9A=84=E6=8C=89=E9=92=AE=E5=92=8C=E5=BA=95=E6=A0=8F=E3=80=8C?=
 =?UTF-8?q?=E6=9C=AC=E9=A1=B5=E7=AC=AC=E5=87=A0=E6=9D=A1=E3=80=8D=E8=A2=AB?=
 =?UTF-8?q?=E5=88=87=E6=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

右栏宽度不到 600 时顶行固定拆成两行（名字和按钮一行、题目一行），
底栏收起方向键提示；不到 440 再收起「本页第几条」，让给两个复制按钮。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../submission/components/FlowchartPane.vue   | 44 ++++++++++++-
 .../submission/components/SubmissionPane.vue  | 61 ++++++++++++++++++-
 2 files changed, 103 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/oj/submission/components/FlowchartPane.vue b/apps/web/src/oj/submission/components/FlowchartPane.vue
index 5c16e16..9b6fdbc 100644
--- a/apps/web/src/oj/submission/components/FlowchartPane.vue
+++ b/apps/web/src/oj/submission/components/FlowchartPane.vue
@@ -284,7 +284,7 @@ const canRetry = computed(
 
     <div v-if="!narrow" class="foot">
       <span class="keys"><kbd>↑</kbd><kbd>↓</kbd></span>
-      <span>换上一张 / 下一张</span>
+      <span class="hint">换上一张 / 下一张</span>
       <div class="spacer"></div>
       <span v-if="position">本页第 {{ position.index }} / {{ position.count }} 条</span>
     </div>
@@ -306,6 +306,7 @@ const canRetry = computed(
   flex-direction: column;
   gap: 12px;
   background: v-bind("theme.bodyColor");
+  container: pane / inline-size;
 }
 
 .head {
@@ -612,4 +613,45 @@ kbd {
   overflow: auto;
   max-height: 80vh;
 }
+
+/* 桌面右栏窄了（屏窄、浏览器放大、列表没收窄）：顶行一行排不下就固定拆成两行 ——
+   名字和按钮一行、题目一行。按宽度定、不按内容定，翻条时高度照样不变 */
+@container pane (max-width: 600px) {
+  .pane:not(.narrow) .head {
+    flex-wrap: wrap;
+    row-gap: 8px;
+  }
+
+  .pane:not(.narrow) .dot {
+    display: none;
+  }
+
+  /* 名字这块占掉按钮左边的全部宽度、从 0 起算：再窄也只是名字被截，按钮不会掉到下一行 */
+  .pane:not(.narrow) .head .who {
+    flex: 1 1 0;
+    overflow: hidden;
+  }
+
+  .pane:not(.narrow) .head .spacer {
+    display: none;
+  }
+
+  .pane:not(.narrow) .user-link {
+    flex-shrink: 0;
+  }
+
+  .pane:not(.narrow) .problem-group {
+    order: 3;
+    flex-basis: 100%;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .pane:not(.narrow) .keys,
+  .pane:not(.narrow) .hint {
+    display: none;
+  }
+}
 </style>
diff --git a/apps/web/src/oj/submission/components/SubmissionPane.vue b/apps/web/src/oj/submission/components/SubmissionPane.vue
index ca0034d..e40843e 100644
--- a/apps/web/src/oj/submission/components/SubmissionPane.vue
+++ b/apps/web/src/oj/submission/components/SubmissionPane.vue
@@ -342,7 +342,9 @@ function openStandalone() {
           复制到自测猫
         </n-button>
       </template>
-      <span v-if="position">本页第 {{ position.index }} / {{ position.count }} 条</span>
+      <span v-if="position" class="position"
+        >本页第 {{ position.index }} / {{ position.count }} 条</span
+      >
     </div>
   </section>
 </template>
@@ -358,6 +360,7 @@ function openStandalone() {
   flex-direction: column;
   gap: 12px;
   background: v-bind("theme.bodyColor");
+  container: pane / inline-size;
 }
 
 .head {
@@ -655,4 +658,60 @@ kbd {
   align-items: center;
   justify-content: center;
 }
+
+/* 桌面右栏窄了（屏窄、浏览器放大、列表没收窄）：顶行一行排不下就固定拆成两行 ——
+   名字和按钮一行、题目一行。按宽度定、不按内容定，翻条时高度照样不变 */
+@container pane (max-width: 600px) {
+  .pane:not(.narrow) .head {
+    flex-wrap: wrap;
+    row-gap: 8px;
+  }
+
+  .pane:not(.narrow) .dot {
+    display: none;
+  }
+
+  /* 名字这块占掉按钮左边的全部宽度、从 0 起算：再窄也只是名字被截，按钮不会掉到下一行 */
+  .pane:not(.narrow) .head .who {
+    flex: 1 1 0;
+    overflow: hidden;
+  }
+
+  .pane:not(.narrow) .head .spacer {
+    display: none;
+  }
+
+  /* 先截班级，名字留全 */
+  .pane:not(.narrow) .user-link {
+    flex-shrink: 0;
+  }
+
+  .pane:not(.narrow) .filter-pill.wide {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    justify-content: flex-start;
+  }
+
+  .pane:not(.narrow) .problem-group {
+    order: 3;
+    flex-basis: 100%;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .pane:not(.narrow) .keys,
+  .pane:not(.narrow) .hint {
+    display: none;
+  }
+}
+
+/* 再窄连「本页第几条」也让给两个复制按钮 */
+@container pane (max-width: 440px) {
+  .pane:not(.narrow) .position {
+    display: none;
+  }
+}
 </style>