fix(手机): 代码缩进显示不出来、相似题长标题挤出屏幕、登录框两边留灰边

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

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

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;

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

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

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;

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;

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>()