Skip to content

app.css 里重复的同名规则静默覆盖布局,已出现三次 #38

Description

@yujiezhang-ops

app.css 里存在多组同名同特异性的规则,靠源码顺序后者胜出,静默改掉前者的布局意图。这已经造成过三次实际问题,而且是 CSS 层面的,测试和构建都抓不到。

当前仍然存在的一处

.agent-manage-row 被定义了两次:

/* app.css:1026 —— 卡片本体 */
.agent-manage-row {
  width: min(100%, 1040px);
  min-height: 84px;
  ...
}

/* app.css:1748-1753 —— 和按钮、链接共享的一条 */
.button,
.disclosure-trigger,
.provider-link,
.agent-manage-row {
  min-height: 28px;
}

Agent 卡片被卷进了给按钮和链接用的 min-height: 28px,覆盖掉本体的 84px。在运行中的应用里量到的生效值:

effectiveMinHeight: "28px"

不是 84px。卡片当前靠内容撑开高度,而不是靠自己声明的最小高度 —— 也就是说那条 min-height: 84px 从来没起作用。看起来是选择器列表里误加了一项,因为卡片和按钮不该共享最小高度。

已经修掉的两处,同一个模式

留作背景,说明这不是孤例:

  1. .agent-manage-identity 被定义两次,后一条 display: grid 且没有列定义,胜出后把 Agent 名称压到图标下方 —— 这是之前「卡片又高又窄」的真正原因,不是布局没写对。
  2. .agent-manage-actions 被定义两次,后一条丢掉了 justify-content,会让操作按钮不再右对齐;只有 flex-shrink 是有用的。

建议

  • 修掉 .agent-manage-row 这一处:从 1748 那条选择器列表里移除它。
  • 顺手查一遍其它重复定义。grep -n '^\.[a-z-]* {' app.css | sort | uniq -d 之类能列出候选。
  • 考虑引入 stylelint 的 no-duplicate-selectors 规则。CI 现在有 Go、Frontend、Docs、Release compliance 四条门,但没有任何一条读 CSS —— 这类问题只能靠人眼在运行的应用里发现,成本太高。

另外两处死代码(顺带记录)

grep 确认这两个选择器在 frontend/src 的全部 .tsx 里没有任何标记使用:

  • .desktop-app-pathapp.css 4 处规则)
  • .agent-manage-target(1 处)

它们早于最近的改动,所以没有一并清理,但可以在同一轮里删掉。

相关代码

  • frontend/src/styles/app.css:1026:1748

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions