From 2957db9ea95f24138849082d8aa76e042395d10e Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sun, 25 Oct 2026 18:56:21 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=89=8B=E6=9C=BA):=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=BC=A9=E8=BF=9B=E6=98=BE=E7=A4=BA=E4=B8=8D=E5=87=BA=E6=9D=A5?=
 =?UTF-8?q?=E3=80=81=E7=9B=B8=E4=BC=BC=E9=A2=98=E9=95=BF=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E6=8C=A4=E5=87=BA=E5=B1=8F=E5=B9=95=E3=80=81=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E6=A1=86=E4=B8=A4=E8=BE=B9=E7=95=99=E7=81=B0=E8=BE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 题目页编辑器：手机上折行时把行首空格合并掉了，代码看着全部顶格（代码本身没丢）
- 相似题推荐：长标题把难度挤出屏幕，现在出省略号
- 登录、注册、看板「讲错误」：本该铺满整屏，被全站弹框「左右各留 16px」卡窄；
  高度跟着浏览器工具栏变，底下的入口不再被压住
- 排名页底部三张小卡：「这学期 · 本年级」被截断，现在放不下就折两行，名次对齐
- 我的主页：「成就 · 一共 38 个」不再把「个」单独挤到第二行

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/oj/classroom/components/ExplainModal.vue  | 3 +++
 apps/web/src/oj/problem/components/SimilarProblems.vue | 5 +++++
 apps/web/src/oj/rank/components/RankMe.vue             | 8 ++++++--
 apps/web/src/oj/user/components/ProfileCard.vue        | 5 ++++-
 apps/web/src/shared/components/Login.vue               | 5 +++++
 apps/web/src/shared/components/Signup.vue              | 5 +++++
 apps/web/src/shared/extensions/hangIndent.ts           | 3 ++-
 7 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/oj/classroom/components/ExplainModal.vue b/apps/web/src/oj/classroom/components/ExplainModal.vue
index 9abdd31..39955c4 100644
--- a/apps/web/src/oj/classroom/components/ExplainModal.vue
+++ b/apps/web/src/oj/classroom/components/ExplainModal.vue
@@ -273,7 +273,10 @@ kbd {
 
 .sheet.narrow {
   width: calc(100vw - 16px);
+  /* 全站给 .n-modal 的「左右各留 16px」在这里不要 */
+  max-width: none;
   max-height: calc(100vh - 16px);
+  max-height: calc(100dvh - 16px);
   padding: 12px 14px 16px;
   gap: 12px;
 }
diff --git a/apps/web/src/oj/problem/components/SimilarProblems.vue b/apps/web/src/oj/problem/components/SimilarProblems.vue
index 65dc4e4..04ee688 100644
--- a/apps/web/src/oj/problem/components/SimilarProblems.vue
+++ b/apps/web/src/oj/problem/components/SimilarProblems.vue
@@ -79,6 +79,11 @@ function difficultyType(difficulty: string) {
   margin: 0 0 8px;
 }
 
+/* 列表项的内容区默认按内容撑宽，长标题会把难度挤出屏幕，省略号也不出来 */
+.similar :deep(.n-list-item__main) {
+  min-width: 0;
+}
+
 .link {
   display: inline-flex;
   align-items: center;
diff --git a/apps/web/src/oj/rank/components/RankMe.vue b/apps/web/src/oj/rank/components/RankMe.vue
index 3d8e819..ead1e0c 100644
--- a/apps/web/src/oj/rank/components/RankMe.vue
+++ b/apps/web/src/oj/rank/components/RankMe.vue
@@ -175,7 +175,8 @@ function threatNote(me: RankRow, behind: RankRow) {
     </div>
     <div v-if="minis.length" class="minis">
       <button v-for="mini in minis" :key="mini.label" class="mini" @click="mini.go">
-        <span class="mini-label">{{ mini.label }} ›</span>
+        <!-- 窄了就在空格处折成两行，「·」「›」用不折行空格粘在前一个词后面 -->
+        <span class="mini-label">{{ mini.label.replace(" · ", "\u00a0· ") }}&nbsp;›</span>
         <b v-if="mini.rank && mini.cap && mini.rank > mini.cap">{{ mini.cap }} 名以外</b>
         <b v-else-if="mini.rank"
           >第 {{ mini.rank }}<small v-if="mini.total"> / {{ mini.total }}</small></b
@@ -448,10 +449,13 @@ function threatNote(me: RankRow, behind: RankRow) {
 .mini-label {
   font-size: 12px;
   color: v-bind("theme.textColor3");
-  white-space: nowrap;
+  text-align: left;
+  word-break: keep-all;
 }
 
+/* 标签有的折两行有的一行，名次一律沉底，三张卡才对得齐 */
 .mini b {
+  margin-top: auto;
   font-size: var(--oj-fs-body);
   font-variant-numeric: tabular-nums;
 }
diff --git a/apps/web/src/oj/user/components/ProfileCard.vue b/apps/web/src/oj/user/components/ProfileCard.vue
index 0c57a3c..4824665 100644
--- a/apps/web/src/oj/user/components/ProfileCard.vue
+++ b/apps/web/src/oj/user/components/ProfileCard.vue
@@ -64,7 +64,10 @@ const stats = computed(() => {
     list.push({
       big: o.achievements.unlocked.length,
       unit: "个",
-      sub: `成就 · 一共 ${o.achievements.total} 个`,
+      // 手机上三格挤在一行，「成就 · 一共 38 个」会把「个」单独挤到第二行
+      sub: props.compact
+        ? `共 ${o.achievements.total} 个成就`
+        : `成就 · 一共 ${o.achievements.total} 个`,
     })
   return list
 })
diff --git a/apps/web/src/shared/components/Login.vue b/apps/web/src/shared/components/Login.vue
index a4bceff..0f5710a 100644
--- a/apps/web/src/shared/components/Login.vue
+++ b/apps/web/src/shared/components/Login.vue
@@ -638,7 +638,12 @@ watch(
   .box.pick,
   .box.user {
     width: 100vw;
+    /* 全站给 .n-modal 的「左右各留 16px」在这里不要 */
+    max-width: none;
+    /* 100vh 是浏览器工具栏收起时的高度，工具栏露着的时候底下那截被压住；
+       dvh 跟着工具栏变，Chrome 108 起才有，105 退回 100vh */
     height: 100vh;
+    height: 100dvh;
     max-height: none;
     border-radius: 0;
     padding: 12px 16px 16px;
diff --git a/apps/web/src/shared/components/Signup.vue b/apps/web/src/shared/components/Signup.vue
index 2a9e225..bc57c73 100644
--- a/apps/web/src/shared/components/Signup.vue
+++ b/apps/web/src/shared/components/Signup.vue
@@ -278,7 +278,12 @@ watch(signupModalOpen, (open) => {
 @media (max-width: 640px) {
   .box {
     width: 100vw;
+    /* 全站给 .n-modal 的「左右各留 16px」在这里不要 */
+    max-width: none;
+    /* 100vh 是浏览器工具栏收起时的高度，工具栏露着的时候底下那截被压住；
+       dvh 跟着工具栏变，Chrome 108 起才有，105 退回 100vh */
     height: 100vh;
+    height: 100dvh;
     max-height: none;
     border-radius: 0;
     padding: 12px 16px 16px;
diff --git a/apps/web/src/shared/extensions/hangIndent.ts b/apps/web/src/shared/extensions/hangIndent.ts
index 0046e2f..20a9bba 100644
--- a/apps/web/src/shared/extensions/hangIndent.ts
+++ b/apps/web/src/shared/extensions/hangIndent.ts
@@ -24,7 +24,8 @@ function leadingWidth(text: string): number {
   return width
 }
 
-const glue = Decoration.mark({ attributes: { style: "white-space: nowrap" } })
+// 不折行用 pre 而不是 nowrap：nowrap 会把空格合并掉，行首缩进整个没了
+const glue = Decoration.mark({ attributes: { style: "white-space: pre" } })
 
 function hangDecorations(view: EditorView): DecorationSet {
   const builder = new RangeSetBuilder<Decoration>()