style(提交列表): 列表放宽、代码区收窄，题目名不再被截成三个字；只看一个人时筛选框换成名字标签

- 左右从「列表 560 固定 + 代码占满」改成 56% : 44%（大屏列表最宽 1000）：学生的代码大多
  十来行，右边原来空着一大片，左边的题目名却只剩三个字；用户名一列 132 → 116
- 右栏顶上固定一行：「只看他 / 只看这题」只留漏斗图标，题目名太长时省略，翻条时代码区不再上下跳
- 按整名只看一个人时（只看他、协作条、看板点进来），108px 的输入框装不下八九个字的用户名，
  换成「只看 xxx ×」的标签；列表里题目名加上鼠标提示

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

apps/web/src/oj/submission/components/FlowchartPane.vue

@@ -150,17 +150,32 @@ const canRetry = computed(
         >
           <UserName :username="row.username" />
         </a>
-        <button class="filter-pill" @click="emit('filterUser', row.username)">
+        <button
-          <Icon icon="ph:funnel-simple-bold" :width="11" />只看他
+          class="filter-pill"
+          title="只看他的提交"
+          aria-label="只看他的提交"
+          @click="emit('filterUser', row.username)"
+        >
+          <Icon icon="ph:funnel-simple-bold" :width="12" />
         </button>
       </div>
       <span class="dot">·</span>
-      <a class="problem" href="#" @click.prevent="emit('openProblem', row)">
+      <a
+        class="problem"
+        href="#"
+        :title="`${row.problemDisplayId} ${row.problemTitle}`"
+        @click.prevent="emit('openProblem', row)"
+      >
         <span class="problem-id">{{ row.problemDisplayId }}</span>
         {{ row.problemTitle }}
       </a>
-      <button class="filter-pill" @click="emit('filterProblem', row.problemDisplayId)">
+      <button
-        <Icon icon="ph:funnel-simple-bold" :width="11" />只看这题
+        class="filter-pill"
+        title="只看这道题的提交"
+        aria-label="只看这道题的提交"
+        @click="emit('filterProblem', row.problemDisplayId)"
+      >
+        <Icon icon="ph:funnel-simple-bold" :width="12" />
       </button>
       <div class="spacer"></div>
       <n-button
@@ -274,6 +289,17 @@ const canRetry = computed(
   gap: 8px;
   white-space: nowrap;
   font-size: 15px;
+  min-width: 0;
+}
+
+/* 顶上固定一行：按方向键翻条时这一行高度不能变，不然下面的代码区跟着上下跳。
+   名字和按钮不缩，题目名太长时省略（全名在 title 里） */
+.head .who {
+  flex-shrink: 0;
+}
+
+.head .problem {
+  flex: 0 1 auto;
 }
 
 .narrow {
@@ -343,10 +369,13 @@ const canRetry = computed(
   text-overflow: ellipsis;
 }
 
+/* 只留漏斗图标（右栏六百来宽，带字的话名字、题目和按钮排不进一行），字在 title 里 */
 .filter-pill {
   flex: none;
+  width: 24px;
   height: 22px;
-  padding: 0 7px;
+  padding: 0;
+  justify-content: center;
   border: 1px solid v-bind("tone('success').background");
   border-radius: 11px;
   background: transparent;

apps/web/src/oj/submission/components/SubmissionPane.vue

@@ -237,23 +237,30 @@ function openStandalone() {
         </a>
         <button
           class="filter-pill"
-          title="只看这个人的提交"
+          title="只看他的提交"
+          aria-label="只看他的提交"
           @click="emit('filterUser', row.username)"
         >
-          <Icon icon="ph:funnel-simple-bold" :width="11" />只看他
+          <Icon icon="ph:funnel-simple-bold" :width="12" />
         </button>
       </div>
       <span class="dot">·</span>
-      <a class="problem" href="#" @click.prevent="emit('openProblem', row)">
+      <a
+        class="problem"
+        href="#"
+        :title="`${row.problemDisplayId} ${row.problemTitle}`"
+        @click.prevent="emit('openProblem', row)"
+      >
         <span class="problem-id">{{ row.problemDisplayId }}</span>
         {{ row.problemTitle }}
       </a>
       <button
         class="filter-pill"
         title="只看这道题的提交"
+        aria-label="只看这道题的提交"
         @click="emit('filterProblem', row.problemDisplayId)"
       >
-        <Icon icon="ph:funnel-simple-bold" :width="11" />只看这题
+        <Icon icon="ph:funnel-simple-bold" :width="12" />
       </button>
       <a
         v-if="row.problemSet"
@@ -427,6 +434,16 @@ function openStandalone() {
   min-width: 0;
 }
 
+/* 顶上固定一行：按方向键翻条时这一行高度不能变，不然下面的代码区跟着上下跳。
+   名字和按钮不缩，题目名太长时省略（全名在 title 里） */
+.head .who {
+  flex-shrink: 0;
+}
+
+.head .problem {
+  flex: 0 1 auto;
+}
+
 .narrow {
   padding: 12px 14px;
 }
@@ -490,10 +507,13 @@ function openStandalone() {
   background: v-bind("tone('info').background");
 }
 
+/* 只留漏斗图标（右栏六百来宽，带字的话名字、题目和按钮排不进一行），字在 title 里 */
 .filter-pill {
   flex: none;
+  width: 24px;
   height: 22px;
-  padding: 0 7px;
+  padding: 0;
+  justify-content: center;
   border: 1px solid v-bind("tone('success').background");
   border-radius: 11px;
   background: transparent;

apps/web/src/oj/submission/list.vue

@@ -543,6 +543,14 @@ function clear() {
   query.language = keepMode
 }
 
+/** 现在是不是按整名只看一个人（输入框换成名字标签的时候） */
+const exactPerson = computed(() => !!exactFor.value && query.username === exactFor.value)
+
+function clearPerson() {
+  exactFor.value = ""
+  query.username = ""
+}
+
 function filterUser(username: string) {
   exactFor.value = username
   query.myself = "0"
@@ -703,8 +711,20 @@ function dayBreak(index: number) {
         />
       </template>
 
+      <!-- 按整名只看一个人（「只看他」、协作条、看板点进来）：用户名有八九个字，塞进 108px 的
+           输入框只剩半截，还被清除按钮压着 —— 换成一个带名字的标签，点 × 取消 -->
+      <button
+        v-if="!mine && exactPerson"
+        class="chip on person"
+        :title="`只看 ${query.username}（点一下取消）`"
+        @click="clearPerson"
+      >
+        <Icon icon="ph:user-bold" :width="12" />
+        <UserName :username="query.username" class="person-name" />
+        <Icon icon="ph:x-bold" :width="12" />
+      </button>
       <n-input
-        v-if="!mine"
+        v-else-if="!mine"
         v-model:value="query.username"
         class="w-user"
         size="small"
@@ -840,7 +860,7 @@ function dayBreak(index: number) {
                 <template v-if="isDesktop">
                   <span class="c-time">{{ submissionClockText(row.createTime) }}</span>
                   <span class="c-user"><UserName :username="row.username" /></span>
-                  <span class="c-problem">
+                  <span class="c-problem" :title="`${row.problemDisplayId} ${row.problemTitle}`">
                     <span class="pid">{{ row.problemDisplayId }}</span> {{ row.problemTitle }}
                   </span>
                   <span class="c-state">
@@ -883,7 +903,7 @@ function dayBreak(index: number) {
                   <span class="c-user">
                     <UserName :username="row.username" :muted="othersRow(row)" />
                   </span>
-                  <span class="c-problem">
+                  <span class="c-problem" :title="`${row.problemDisplayId} ${row.problemTitle}`">
                     <span class="title">
                       <span class="pid">{{ row.problemDisplayId }}</span> {{ row.problemTitle }}
                     </span>
@@ -1180,6 +1200,15 @@ function dayBreak(index: number) {
   font-weight: 600;
 }
 
+.chip.person {
+  max-width: 180px;
+  padding: 0 10px;
+}
+
+.chip.person .person-name {
+  font-size: 13px;
+}
+
 .lesson b {
   font-weight: 600;
 }
@@ -1195,9 +1224,11 @@ function dayBreak(index: number) {
   display: flex;
 }
 
+/* 列表占多一点：学生的代码大多十来行、一行几十个字，右边给多了是一片空白（用户看过定的）。
+   大屏上列表最宽 1000，再宽一行里全是空隙 */
 .list {
-  width: 560px;
+  flex: 0 0 56%;
-  flex: none;
+  max-width: 1000px;
   box-sizing: border-box;
   border-right: 1px solid v-bind("theme.dividerColor");
   display: flex;
@@ -1205,14 +1236,9 @@ function dayBreak(index: number) {
   min-height: 0;
 }
 
-/* 1366 以下（机房 1280 的屏）左栏收窄一点，右边的代码多留几列 */
-@media (max-width: 1365px) {
-  .list {
-    width: 520px;
-  }
-}
-
 .mobile .list {
+  flex: 1 1 auto;
+  max-width: none;
   width: 100%;
   border-right: 0;
 }
@@ -1343,7 +1369,7 @@ function dayBreak(index: number) {
 }
 
 .c-user {
-  width: 132px;
+  width: 116px;
   flex: none;
   display: flex;
   overflow: hidden;