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

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

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

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