feat(web): migrate workspace settings pages off bespoke CSS (migration phase 3, surface 2) - #789
Conversation
…n phase 3, surface 2) Move the GitHub-comment settings tab (settings.astro) and the storage / BYO-bucket sub-page (settings/storage.astro) from their page-scoped .cs-* and .storage-* CSS onto Tailwind utility classes, keeping the legacy class names in markup as DOM/test hooks (none turned out to be asserted on by tests). Both pages' scoped <style> blocks only ever served these two pages exclusively (confirmed by grep across apps/web/src) — no account-content.css rule needed touching, and settings-page/ settings-section/ws-page-header stay untouched since they're shared with developers/profile/galleries pages outside this surface. storage.astro: .storage-actions, .storage-summary(__step/__num/__body/ __title/__sub), .storage-instructions, #storage-form, .storage-checklist (+ :empty/li), .storage-adopt-label, .storage-check-row/-hint, .storage-signed-only-note, and the data-state color rules all move to utilities (including in the two script-generated markup strings); the entire <style> block is deleted. settings.astro: .cs-install(__body/__cta incl. hover/focus-visible), .cs-repo-banner, #cs-form, .cs-row(__info/__label-line/__label/__desc/ __control), .cs-image-width-px, #cs-max-inline, .cs-row--note(__note-head/ __note-count + textarea), .cs-preview-repo-field/-select/-footnote, .cs-ghc(-avatar/-bubble/-head/-user/-bot-chip), .cs-preview-body (+ img/ table/td), and the savebar's static layout all move to utilities (including the 680px stack breakpoint, via max-[680px]:). Left as CSS, deliberately: .cs-toggle/__knob (aria-checked pseudo-state transitions), .cs-seg/__btn (radiogroup aria-checked + :hover:not()/:first-child), the JS-toggled .cs-row--dimmed class, and the savebar's data-state/data-mode conditional-visibility selectors — genuinely state-driven CSS, not layout duplication, and converting them risked functional regressions for no CSS-debt payoff. Verified: astro build green, pnpm lint clean (only pre-existing warnings elsewhere), comment-preview-sanitize.test.ts passes (29/29, unaffected by this change — no test asserts these class strings).
…ives Tailwind utilities live in @layer utilities, so any unlayered rule from the kept ul-* primitives (ul-input/ul-select set width: 100%) beats them regardless of specificity. The three narrow-width controls (max-inline and image-width inputs on comment settings, the member role select from #787) now carry inline widths instead of w-* utilities.
|
|
Maintained by uploads.sh · add media: |
|
Important Review skippedAuto reviews are limited based on label configuration. 🏷️ Required labels (at least one) (2)
🚫 Excluded labels (none allowed) (1)
Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…orage-settings-788
1 participant
Second phase-3 surface of the Tailwind + shadcn migration (follows #787; plan in
.context/2026-08-22-tailwind-shadcn-migration-plan.md, local doc).What
settings.astro): the.cs-*layout family (install banner, row grid + 680px breakpoint, preview repo field, GitHub-comment preview bubble, savebar layout) moved to Tailwind utilities; legacy class names stay as DOM hooks.settings/storage.astro): the entire scoped<style>block (~114 lines — summary steps, checklist, adopt/check rows, data-state colors) migrated, including the two script-generated HTML strings..cs-toggle/.cs-segaria-state styling,.cs-row--dimmed, savebardata-modevisibility. Converting those buys no debt reduction and risks behavior.settings-page/settings-section/ws-page-headeretc. inaccount-content.cssstill serve developers/profile/galleries — they migrate with their own surfaces.A cascade lesson (also fixes a latent #787 bug)
Tailwind utilities live in
@layer utilities, so any unlayered rule from the keptul-*primitives beats them regardless of specificity —ul-input/ul-selectsetwidth: 100%, which silently defeatedw-[8rem]/w-auto. The three narrow-width controls (max-inline + image-width inputs here, and the member role select from #787) now carry inline widths. Rule of thumb recorded for later surfaces: utilities can't override a kept unlayered primitive; either delete the primitive rule with its surface or use an inline style.Verification
astro build, lint green;workspace-uivitest 47/47.Screenshots attach via the managed comment.