refactor(ui): relocate settings CSS into per-surface files (#546 PR1) - #588
Merged
Conversation
Dissolve the grab-bag files (tool-stream, health-center, permission-center, settings-select) and split the misplaced chat content out of settings/models.css so every CSS file matches a single surface. Zero visual change: every top-level rule is preserved verbatim, verified by expanding styles.css's @import tree before and after and diffing the sorted rule set (identical, 1682 rules both sides). Surfaces relocated: - tool-stream.css (4 surfaces) -> settings/{web-search,memory}.css + onboarding.css + daily-review.css, then deleted - health-center.css -> settings/health.css - permission-center.css -> settings/permission.css - settings/models.css lines 285-1016 (artifact pane, browser panel, turn search-highlight, session-branch banner) -> chat-detail.css - settings/connection.css memory meta row -> settings/memory.css - settings/form.css runtime permission diff/raw -> permission-dialog.css - settings-select.css -> settings/select.css (SettingsSelect chrome) + model-switcher.css (ModelPicker combobox) styles.css and styles/settings.css @import lists updated accordingly. Part of #546.
…tion Two contract tests assumed the old file layout / cross-file import order: - model-thinking-level-contract readModelPickerCss hardcoded settings-select.css (deleted in the previous commit) -> now reads settings/select.css, where the SettingsSelect chrome now lives. - session-sticky-model-contract used a greedy [\s\S]* regex that matched `min-height: 32px` across rule boundaries; it passed only because settings-select.css was imported before model-switcher.css. Now anchors inside one rule block ([^}]*) and matches the actual control-lg token (= 32px), so it no longer depends on cross-file @import order. Part of #546.
…t move
Codex review caught a cascade regression: settings/select.css was imported
via settings.css (which sits after model-switcher.css in styles.css), so
.settingsSelectMenuPopup { overflow-y: auto } landed AFTER
.modelPickerPopup { overflow: hidden }. Same specificity -> later wins, so
the ModelPicker outer popup scrolled instead of only .modelPickerList,
breaking the pinned search/footer on long catalogs.
Import settings/select.css directly from styles.css, immediately before
model-switcher.css, restoring main's order (settings-select was imported
just before model-switcher there too). Rule set unchanged; only the
cross-file cascade order is restored to main parity.
7 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
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.
Summary
Phase A "settings relocation" pass (#546 PR1): dissolve the four grab-bag CSS files and split the misplaced chat content out of
settings/models.css, so every CSS file matches a single surface. Zero visual change.Why
Refs #546. Post-#520 CSS governance: filenames and actual selectors diverged widely —
tool-stream.cssheld 4 unrelated surfaces,settings/models.csswas 71% chat content,health-center/permission-centerbelong undersettings/but sat at the styles root. Relocate first (zero visual change, governed by the converge contracts), polish per-surface later (Phase B/C).Scope
Changed:
tool-stream.css(4 surfaces) →settings/{web-search,memory}.css+onboarding.css+daily-review.csshealth-center.css→settings/health.css;permission-center.css→settings/permission.csssettings/models.csslines 285-1016 (artifact pane, browser panel, turn highlight, session-branch banner) → newchat-detail.csssettings/connection.cssmemory meta row →settings/memory.csssettings/form.cssruntime permission diff/raw → newpermission-dialog.csssettings-select.css→settings/select.css(SettingsSelect chrome) +model-switcher.css(ModelPicker)styles.css+styles/settings.css@importlists updatedNot included:
Verification
styles.css's full@importtree before (main) and after (this branch) using the sameexpandCssImportspath the converge contracts use, normalized each top-level rule, sorted, and diffed — identical (1682 rules both sides).npm run -w @maka/desktop test→ 2134 pass, 0 fail (includes every converge contract).@importpaths resolve.User-facing impact
None. Pure CSS relocation; selectors and declarations are byte-identical, only their file location changes.
Reviewer notes
settings-select.csspath; the other used a greedy cross-rule regex ([\s\S]*min-height: 32px) that only passed because of the old import order — it now anchors inside one rule block ([^}]*) and matches the actualcontrol-lgtoken.chat-detail.cssis a new transitional surface; PR5 polishes artifact/browser there.Checklist