fix(提交列表): 流程图右栏窄时题目名被「查看大图」「重新评分」挤成一个字
右栏不到 760 宽时这两个按钮只留图标,字放进悬停提示。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
5c997b6276
commit
0f75fd1bd0
1 file changed
+25
-1
@@ -192,15 +192,25 @@ const canRetry = computed(
|
||||
</button>
|
||||
</span>
|
||||
<div class="spacer"></div>
|
||||
<!-- 右栏窄时这两个只剩图标(字在 title 里),把宽度让给题目名 -->
|
||||
<n-button
|
||||
v-if="shown && !renderError && shown.mermaidCode"
|
||||
class="head-btn"
|
||||
size="small"
|
||||
title="查看大图"
|
||||
@click="bigOpen = true"
|
||||
>
|
||||
<template #icon><Icon icon="ph:corners-out" /></template>
|
||||
查看大图
|
||||
</n-button>
|
||||
<n-button v-if="teacher" size="small" :disabled="!canRetry" @click="emit('retry', row.id)">
|
||||
<n-button
|
||||
v-if="teacher"
|
||||
class="head-btn"
|
||||
size="small"
|
||||
title="重新评分"
|
||||
:disabled="!canRetry"
|
||||
@click="emit('retry', row.id)"
|
||||
>
|
||||
<template #icon><Icon icon="ph:arrow-clockwise" /></template>
|
||||
重新评分
|
||||
</n-button>
|
||||
@@ -616,6 +626,20 @@ kbd {
|
||||
|
||||
/* 桌面右栏窄了(屏窄、浏览器放大、列表没收窄):顶行一行排不下就固定拆成两行 ——
|
||||
名字和按钮一行、题目一行。按宽度定、不按内容定,翻条时高度照样不变 */
|
||||
@container pane (max-width: 760px) {
|
||||
.pane:not(.narrow) .head-btn {
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
.pane:not(.narrow) .head-btn :deep(.n-button__content) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pane:not(.narrow) .head-btn :deep(.n-button__icon) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@container pane (max-width: 600px) {
|
||||
.pane:not(.narrow) .head {
|
||||
flex-wrap: wrap;
|
||||
|
||||
Reference in new issue
Block a user