feat(后台): 手机上也能用了——菜单收进左边抽屉，列表一行一张卡，不用再横着滑

- 侧栏手机上不再占一列图标，顶栏左边 ☰ 拉出整张菜单，按返回键先关菜单
- 题目、比赛、用户、公告、题单列表手机上一项一张卡：名字一行、小字一行、按钮一行，
  「学生看得到」开关单独一列靠右
- 卡点分析、AI 报告手机上点开一项整屏看，返回键关掉；年度趋势、自学情况、首页改成上下排
- 出题页、教程编辑、题单编辑、标签、设置手机上排成一列；测试数据「删掉」手机上常驻
- 弹框一律收进屏幕宽度

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

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

@@ -1707,4 +1707,42 @@ onMounted(async () => {
   border-radius: 6px;
   overflow: hidden;
 }
+
+/* 手机：卡片收窄，挤在一行的东西折下去 */
+@media (max-width: 768px) {
+  .card {
+    padding: 12px;
+  }
+
+  /* 编号 + 题目一行，难度 + 可见折到第二行 */
+  .headRow {
+    flex-wrap: wrap;
+  }
+
+  .headRow .grow {
+    flex: 1 1 180px;
+  }
+
+  .io {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  /* 老题面里的图片带着写死的像素宽（有 1118px 的），把整页撑出横向滚动 */
+  .card :deep(.w-e-image-container) {
+    max-width: 100%;
+    height: auto !important;
+  }
+
+  .card :deep(.w-e-image-container img) {
+    height: auto !important;
+  }
+
+  .inlineRow {
+    flex-wrap: wrap;
+  }
+
+  .blockers {
+    -webkit-line-clamp: 3;
+  }
+}
 </style>