fix(排名): 手机上的排名不再是四屏长的一栏，条变成每行底色、只列你附近几行，下面四块收成页签

- 条形改成整行的底色：窄屏上原来只剩 30px 宽的条看不出谁多谁少
- 默认只列领奖台下的前 5 行和你上下各 2 行，「看全班 39 人」点开；本年级 / 全服折起来的段点开再取全量
- 「你」那张卡：对手的说明换到名字下面一行，不再被截断
- 范围、时间两组开关各占满一行；班级对抗、名次走势、这周本班、每周冠军收成一张页签卡
- 有「追你」标签的那行数字不再错位

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

apps/web/src/oj/rank/components/RankMe.vue

@@ -25,6 +25,8 @@ const props = defineProps<{
   total: number
   label: string
   minis: MiniRank[]
+  /** 手机：对手的说明换到名字下面一行，别被截断 */
+  compact?: boolean
 }>()
 
 const theme = useThemeVars()
@@ -58,7 +60,7 @@ function threatNote(me: RankRow, behind: RankRow) {
 </script>
 
 <template>
-  <div class="me-card">
+  <div class="me-card" :class="{ compact }">
     <div class="head">
       <RankAvatar :username="me.user.username" :avatar="me.avatar" :size="46" me />
       <div class="place">
@@ -191,6 +193,18 @@ function threatNote(me: RankRow, behind: RankRow) {
   min-width: 0;
 }
 
+.compact .rival {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  align-items: center;
+  row-gap: 1px;
+}
+
+.compact .note {
+  grid-column: 3;
+  white-space: normal;
+}
+
 .rival-name {
   flex-shrink: 0;
   max-width: 120px;