fix(desktop): polish small form-row pages — Daily Review, Data, and About - #1500
Merged
Astro-Han merged 4 commits intoJul 26, 2026
Merged
Conversation
…Appearance Closes apache#1362 (sub-issue of apache#1303). Baseline first: no story ever rendered the proxy sub-form (it hides behind two switches), so the 3-column proxy grid and the auth grid had no reproduction surface. GeneralProxyConfigured renders the full stack with hostile widths (long internal hostname, service-account username, long CJK identity fields). THE row-wrapping decision (routed here from apache#1360/apache#1361/apache#1364): the .settingsRows card is now a named inline-size query container, and below 460px of CARD width — not viewport width, which the content column trails by the nav sidebar — label/control rows stack vertically and the form grids fold to one column. Switch rows keep the control beside the label (a ~40px switch always fits; stacking it reads as an orphan). 460px is the app's single container breakpoint, shared with permission-dialog.css, and the responsive-breakpoint contract now governs @container widths with the same whitelist mechanism as @media. Structural fixes that fell out of the audit: - .settingsStructuredPage gets an explicit minmax(0,1fr) column: the implicit auto track sized to the widest child's max-content and silently widened every card past the content column (the same propagation apache#1364 fixed locally on .settingsUsagePage). - Row titles drop white-space:nowrap (a long title bled over the value column instead of wrapping; the char-per-line protection the nowrap provided is now structural: 150px label floor + narrow-card stacking). Titles and hints gain overflow-wrap:anywhere as a last resort. - The proxy sub-form's non-row children (grids, bypass field, alert, action row) sat flush against the card edge while every row is inset 24px — one horizontal inset for everything inside a card. - Select triggers ellipsize the selected label instead of bleeding. - Appearance palette names wrap instead of truncating ("Catppucc…"). - Action-row buttons may shrink + wrap on a squeezed card (the Button primitive is shrink-0 with a fixed height). Verification: Storybook sweep 480-1280px in 10px steps on General / GeneralProxyConfigured / Appearance — zero overflow; regression probe across all other settings stories is equal-or-better everywhere (About and Web Search narrow overflows fixed as a side effect, Daily Review 480px cleared). New e2e locks both directions (stacked at the floor, two-column when wide, proxy grid folds, page contained) and fails on main's CSS. Desktop unit tests 2847/2847; settings e2e 14/14; live-app General+proxy / Appearance contained at 1280 and 480.
Review follow-up for apache#1481 (both inline comments): - settings-theme-contract scoped to the `.settingsThemeLabel strong` rule body ([^}]* instead of [\s\S]*, which crossed the closing brace and matched declarations in later, unrelated rules — the old assertion passed by accident). It now requires the wrap (overflow-wrap: anywhere) and rejects the truncation combination. A new e2e pins the user-facing result at the 480px floor: the full "Catppuccin Mocha" label visible in both axes and the page contained. Note: at the real app's window floor the single-column tile is wide enough that the old ellipsis did not trigger, so the e2e is a guard against future tile-geometry regressions — the contract test is the discriminator for the CSS itself. - The stacking e2e now enables proxy authentication too and asserts BOTH grids fold to one column: `.settingsFormGrid` (auth) and `.settingsFormGridProxy` are separate selectors in the narrow container rule and either could regress alone. Desktop unit tests 2847/2847; settings e2e 17/17 locally.
…bout Closes apache#1363 (sub-issue of apache#1303). Baseline first: the story bridge's app.info had no workspacePath at all, so the About and Data pages' 工作区路径 rows rendered an EMPTY value in every story — the long-mono-value wrap contract had no reproduction surface. The bridge now serves a deliberately deep path. Daily Review and About mostly ride the apache#1362 row-stacking mechanism (their rows live in .settingsRows cards); the page-owned fixes left: - .settingsAboutPage and .settingsFeatureStatusPage get the same explicit minmax(0,1fr) column as .settingsStructuredPage (apache#1362) — their implicit auto tracks let one wide child widen every card past the content column. - Data's config strategy row (nowrap label + select, one-line minimum wider than the 480px floor column) wraps instead of dragging the section into overflow; the category label stacks get min-width:0. Verification: Storybook sweep 480-1280px in 10px steps on all three stories — zero overflow; new e2e locks the floor (strategy row wraps, workspace mono value contained, all three pages contained) and fails on the pre-apache#1363 CSS (revert-verified). Desktop unit tests 2857/2857; settings e2e 18/18.
UncertaintyDeterminesYou4ndMe
force-pushed
the
fix/1363-small-pages
branch
from
July 26, 2026 02:40
d43bf67 to
bc6ea0b
Compare
Astro-Han
reviewed
Jul 26, 2026
Astro-Han
reviewed
Jul 26, 2026
…abel Review follow-up for apache#1500 (both inline comments): - The narrow-card switch exception now applies only when the switch is the row's ONLY control (`:not(:has(> :nth-child(3):not(input)))` — the `:not(input)` spares Base UI Switch's hidden sibling checkbox). Memory's label + status Chip + switch row also groups the chip and switch into one `.settingsFormRowControlCluster`, so the stacked row keeps them on one line; the cluster deliberately has no min-width:0 (its floor is the nowrap chip — the label side owns the squeeze). New 480px Memory geometry e2e: row stacked, label owns the full content width, cluster and row contained. - The Data strategy label drops white-space:nowrap — the English copy ("Connections with the same name:", 205px) overflowed the 188px floor column into clipped space the page-level assertion could not see. The zh test now asserts the section itself is contained, and a new English-locale test covers the wider copy. Chasing the Memory geometry test exposed the same implicit-track leak THREE layers deep on the Memory page (entry list > entry card, preview card, backup list) plus nowrap action rows — all got the explicit minmax(0,1fr) column and wrapping. memory-populated now sweeps clean 480-1280px, so the Memory whole-page containment assertion apache#1364 had to carve out is finally in place. Desktop unit tests 2857/2857; settings e2e 20/20 locally; live-app Memory contained at 1280 and 480.
Astro-Han
approved these changes
Jul 26, 2026
Astro-Han
left a comment
Astro-Han
left a comment
Contributor
There was a problem hiding this comment.
Both P2 findings are resolved in 517fb54. The Memory status row now stacks without crushing its label, and the Data strategy label wraps in English with section-level containment coverage. The targeted 480px geometry tests cover both regressions, and typecheck, test, and e2e are green. This head also contains the full #1481 stack, so #1481 should be closed as superseded after this merges.
9 tasks
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
2 participants
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.
Closes #1363 (sub-issue of #1303).
基线先行
story bridge 的
app.info从来没有workspacePath字段——About 和 Data 页的「工作区路径」行在所有 story 里渲染的都是空值，长 mono 路径的换行契约没有复现面。bridge 现在提供一条刻意加深的路径（/Users/storybook-fixture-user/Library/Application Support/Maka/workspaces/infra-observability-platform-desktop）。修复
这三页的行都在
.settingsRows卡内，大头由 #1481 的行堆叠机制直接覆盖（#1481 的回归探测显示 About 与 Daily Review 的窄态残留已被共享层清零）。本 PR 只补页面自有的缺口：.settingsAboutPage/.settingsFeatureStatusPage补与.settingsStructuredPage（fix(desktop): polish form-row pages — General and Appearance #1362）相同的显式minmax(0, 1fr)列——它们是独立页面根，隐式 auto 轨道同样会被最宽子元素撑爆。min-width: 0。验证
未做（已评估）
!hasConfigIpc横幅态同理（仅在 IPC 未接线的构建可达）。