feat(web): migrate workspace people + billing off bespoke CSS (migration phase 3, surface 1) - #787
Conversation
Move renderMembersHtml/renderInvitesHtml/renderMembersPlaceholderHtml (workspace-ui.ts) from .member-row* classes to Tailwind utilities, and delete the now-unused .member-list/.member-row* rules from account-content.css (exclusive to the people tab; .ul-select styling for the role picker is unaffected, it's shared).
Move renderPlanCardsGridHtml (billing-ui.ts) and the plan-cards grid / manage-billing button (billing.astro) from .plan-card*/.plan-cards classes to Tailwind utilities. The .plan-card*/.plan-cards/ #ws-manage-billing-btn rules were already removed from account-content.css in the prior people-list commit (same file edit).
|
|
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 |
…n phase 3, surface 2) (#789) * feat(web): migrate workspace settings pages off bespoke CSS (migration 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). * fix(web): inline widths where utilities lose to unlayered ul-* primitives 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.
1 participant
First phase-3 surface of the Tailwind + shadcn migration (follows #779/#785; plan in
.context/2026-08-22-tailwind-shadcn-migration-plan.md, local doc).What
renderMembersHtml/renderInvitesHtml/ placeholder inworkspace-ui.tsnow emit Tailwind utilities instead of the.member-row*family; legacy class names stay in the markup as DOM/test hooks. The role select keeps the sharedul-selectprimitive.renderPlanCardsGridHtmlinbilling-ui.ts+ the#ws-plan-cardsgrid moved to Tailwind (auto-fit minmax(220px,1fr), same 4px/14px rhythm);.plan-card*family deleted.account-content.css: all.member-row*/.member-listand.plan-card*rules (each grepped repo-wide first; shared classes likeul-callout,ws-form,settings-*,.pro-badgeuntouched — they serve other pages and go with their own surfaces later).py-2).Verification
astro build,pnpm lintgreen;workspace-ui/billing-uivitest 68/68.--fg, matching the deleted CSS.Screenshots of the migrated pages attach via the managed comment.