[Bug] 首页卡片额度进度条高度被压成 0,只剩百分比数字
现象
首页 Dashboard 各平台卡片(Antigravity / Codex / Cursor / Grok 等)额度数据是正常的:百分比、重置时间、颜色状态都在。但 额度进度条整条不见,只剩文字。
账号页如果条还在,就可以排除「额度没刷出来」。看起来是首页 stacked 布局把条画没了。
环境
- OS: macOS
- 主题: 浅色
- 页面: 首页 Dashboard 卡片
预期
每条额度应是:
- 标签 + 百分比
- 中间一条进度条
- 重置时间
实际
第 2 行进度条完全看不到。标签和百分比之间、百分比和重置时间之间只剩空白。
Codex 的 Credits:4,517.22 这行除外:源码里是 showProgress: false,本来就不画条。5h / Weekly、Antigravity、Cursor 这些该有条的行都没有。
原因(源码)
首页用的是纵向堆叠:
<div className="mini-quota-row-stacked">
<div className="mini-quota-header">...</div>
<div className="mini-progress-track">
<div className="mini-progress-bar ..." style={{ width: `${progressPercent}%` }} />
</div>
<div className="mini-reset-time">...</div>
</div>DashboardPage.tsx 里 DOM 是有的,百分比 class(high / medium)也生效了,所以数字是绿/橙的。
但 src/pages/DashboardPage.css 里轨道仍按横向行来写:
.mini-progress-track {
flex: 1;
height: 3px;
background: var(--bg-tertiary);
}flex: 1 = flex-basis: 0%。在 .mini-quota-row-stacked(flex-direction: column、高度 auto)里,主轴是高度,轨道会被算成 0 高,height: 3px 被盖掉。
同一套 .mini-progress-track { flex: 1 } 在横向 .mini-quota-row 里是对的(长宽),搬到 stacked 列布局就塌了。
建议修复
只改 stacked 布局,别动横向行:
.mini-quota-row-stacked .mini-progress-track {
flex: none;
align-self: stretch;
height: 4px;
margin: 4px 0 0;
}3px + gap: 0 就算高度修好了也偏细,stacked 下给一点高度和间距更容易看见。
补充
仓库里暂时没找到同类 issue。#1211、#1528、#1530、#1560 说的是额度数据/周额度展示,不是这条「条在 DOM 里但高度为 0」。
Source: jlcodes99/cockpit-tools