fix(settings): stop the row hairline bending on Astryx Item's corners - #2111
Merged
Conversation
jackwener
force-pushed
the
pr-fix-row-hairline-5
branch
from
August 4, 2026 07:41
2ab0ad3 to
ece8540
Compare
Owner reported what looked like two different divider systems meeting in
the settings rows: a straight line through the middle with a hook at each
end.
Measured at runtime rather than inferred — every `.astryx-item` in an open
row group computes `border-radius: 10px` and `border-block-start: 1px`.
Astryx ships that radius for Item's standalone use, where the row is a chip
that highlights on hover. Our hairline is a border on the Item itself, and a
border follows its own element's corners, so the divider curved down at both
ends. One line, two shapes.
Zeroing the radius inside `.settingsRows` / `.settingsRowsGroup` is the
whole fix. A row in an edge-to-edge group is not a chip: it spans the
content column, so its hover highlight should span it too. Wrapping the row
to keep rounded hover would reintroduce exactly the chip the open row idiom
removed.
Scanned for the rest of the family the general way instead of grepping CSS:
a probe walked nine settings pages and reported every element carrying a
horizontal border together with a corner radius. Two hosts came back.
- `.astryx-item` — this bug, on 关于 / 通用 / 数据 / 记忆 / 语音 / 健康.
One rule covers all six.
- `kbd` — radius 6px with a 2px bottom border. Not this defect: all four
corners are rounded and the heavy bottom edge is Astryx's keycap, drawn
on purpose. Left alone.
Two near-misses worth recording, both checked and both fine:
`.maka-plan-rows` puts its radius on the container and clips with
`overflow: hidden`, which is the correct shape for this; the radius near
`.maka-skill-library-item` belongs to the status glyph beside it, not to
the bordered row.
`astryx-item` joins the check-dead-css runtime-class allow-list next to
`astryx-collapsible-trigger`, for the same reason: Astryx emits it through
themeProps, so it never appears as a className literal in our source.
Verified: build, typecheck, format:check, check-dead-css, test:checks, and
the desktop + ui workspace suites, plus before/after captures of 关于 and
数据 from the real app. storage, cli and runtime-host remain the known
local failures (Node v25 node:sqlite; runtime-host's ownership tests are
flaky under the parallel runner and pass standalone).
jackwener
force-pushed
the
pr-fix-row-hairline-5
branch
from
August 4, 2026 07:52
ece8540 to
a69f0c2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Task #143 — owner 报障的「弯曲分隔线 / 两套隔离线」。
根因（运行时实测，不是推断）
探针取计算样式：开放行组里每一个
.astryx-item都同时是border-radius: 10px+border-block-start: 1px。Astryx 给 Item 这个圆角是服务它的独立用法 —— 一个 hover 时高亮的圆角芯片。而我们的 hairline 是画在 Item 元素自己身上的 border，border 会跟着自己元素的圆角走，于是分隔线两端向下弯。一条线，两种形状 —— owner 看到的「两套隔离线」就是这个。
修法
在
.settingsRows/.settingsRowsGroup内把 Item 圆角归零，这就是全部。edge-to-edge 行组里的行不是芯片：它横贯内容列，所以它的 hover 高亮本来就该横贯。为了保住圆角 hover 去包一层 wrapper，等于把开放行组刚去掉的芯片又装回来 —— 按规格没有这么做。
全仓同族扫描（用通用检测，不是 grep CSS）
写了个探针走 9 个设置页，报告所有同时带横向 border 和圆角的元素。这比搜 CSS 规则可靠 —— 圆角来自 Astryx 主题，源码里根本搜不到。
结果两类宿主：
.astryx-itemkbd修完重跑扫描：
.astryx-item条目全部消失，只剩 kbd。两个虚惊，都核过了：
.maka-plan-rows圆角在容器上且overflow: hidden—— 这正是正确形状.maka-skill-library-item附近那个圆角属于旁边的状态图标方块，不是带 border 的行顺带
astryx-item加进 check-dead-css 的运行时类白名单，紧挨着astryx-collapsible-trigger—— 同样的理由：Astryx 通过 themeProps 运行时产出，源码里不存在这个 className 字面量。验证
npm run buildnpm run typechecknpm run format:checkcheck-dead-css --checktest:checks已知失败：
storage/cli是 Node v25node:sqlite；runtime-host是并行 runner 下的 ownership 测试 flake（单独跑必过）。均与本 PR 无关，本 PR 只改一条 CSS 规则 + 一个白名单条目。@maka-审美专家 请 review。