fix(手机): 比赛排名表看不出能往右滑；班级 PK 每周图日期字太小；后台题目列表「藏着的」被切掉

- 比赛排名：手机上名字、做对、用时就占满一屏，每题的格子全在屏幕外。列收窄，前一两道题的格子露出来
- 班级 PK：每周人均横轴在手机上是 10px 的「10月12日」，改成 12px 的「10/12」
- 后台题目列表：手机上「全部 / 学生看得到 / 藏着的」换小号按钮，放不下就横着滑

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

apps/web/src/admin/problem/list.vue

@@ -96,6 +96,8 @@ const { query, clearQuery } = usePagination<ProblemQuery>({
 })
 
 const counts = ref<{ all: number; visible: number; hidden: number } | null>(null)
+// 手机上后台左边还有一列图标，三个按钮放不下、「藏着的」被切掉：换小号，再不够就横着滑
+const narrow = useMediaQuery("(max-width: 640px)")
 const visibleTabs = computed(() => [
   { value: "" as const, label: "全部", count: counts.value?.all },
   { value: "1" as const, label: "学生看得到", count: counts.value?.visible },
@@ -324,10 +326,11 @@ watch(() => [query.page, query.limit, query.author, query.kind, query.visible],
         <n-text depth="3">出题人</n-text>
         <AuthorSelect v-model:value="query.author" all />
       </n-flex>
-      <n-button-group v-if="!props.contestID">
+      <n-button-group v-if="!props.contestID" class="visible-tabs">
         <n-button
           v-for="tab in visibleTabs"
           :key="tab.value"
+          :size="narrow ? 'small' : 'medium'"
           :type="query.visible === tab.value ? 'primary' : 'default'"
           :secondary="query.visible === tab.value"
           @click="query.visible = tab.value"
@@ -388,6 +391,11 @@ watch(() => [query.page, query.limit, query.author, query.kind, query.visible],
   flex: 1 1 auto;
 }
 
+.visible-tabs {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
 .tab-count {
   margin-left: 6px;
   font-variant-numeric: tabular-nums;

apps/web/src/oj/class/components/PkDuel.vue

@@ -80,7 +80,8 @@ const shownRows = computed(() =>
 const weeks = computed(() => {
   const from = Math.max(0, props.pk.weeks.length - 8)
   const list = props.pk.weeks.slice(from).map((week, k) => ({
-    label: parseTime(week, "M月D日"),
+    // 手机上八根柱挤在一行，「10月12日」只能用 10px 才放得下，太小；改短写法换大一号字
+    label: parseTime(week, props.compact ? "M/D" : "M月D日"),
     values: [left.value.weekly[from + k] ?? 0, right.value.weekly[from + k] ?? 0],
   }))
   const max = Math.max(1, ...list.flatMap((week) => week.values))
@@ -779,6 +780,6 @@ const tab = ref<"weekly" | "dist">("weekly")
 }
 
 .compact .axis {
-  font-size: 10px;
+  font-size: 12px;
 }
 </style>

apps/web/src/oj/contest/pages/rank.vue

@@ -97,10 +97,16 @@ const meBackground = computed(
     `linear-gradient(${success.value.background}, ${success.value.background}), ${theme.value.cardColor}`,
 )
 const danger = computed(() => tone("error"))
-const columns = computed(
-  () =>
-    `40px ${running.value ? "36px " : ""}170px 48px 80px repeat(${problems.value.length}, 64px)`,
-)
+// 手机上照桌面的列宽，名字 + 做对 + 用时就占满一屏，每题的格子全在屏幕外，看不出能往右滑。
+// 收窄到第一两道题的格子露出半截
+const narrow = useMediaQuery("(max-width: 640px)")
+const columns = computed(() => {
+  const move = running.value ? "36px " : ""
+  const count = problems.value.length
+  return narrow.value
+    ? `28px ${move}112px 36px 70px repeat(${count}, 52px)`
+    : `40px ${move}170px 48px 80px repeat(${count}, 64px)`
+})
 </script>
 
 <template>