feat-namespaced-spacing-and-responsive-cols #16
Merged
Conversation
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
Introduce explicit CSS custom properties for padding, margin, and gap (sizes: xs, sm, md, lg, xl, 2xl) that derive from the existing --oui-spacing-base. Each utility gets its own namespace (--padding-, --margin-, --gap-) to avoid collisions with container-related variables. This prevents Tailwind v4 resolution issues where generic --spacing- values (e.g. --spacing-xl) could be picked up as --container-* values, ensuring predictable spacing utilities and safer future upgrades.
Update OuiGrid usages to pass responsive column definitions via the
:cols object (e.g. { sm: 1, md: 2, xl: 4 }) and standardize gap sizing.
This replaces multiple old attribute combinations like cols, colsMd,
colsLg, colsXl and class-based gaping with a single, consistent API.
Apply these changes across several dashboard pages (invoices, billing,
abuse, quotas, dns, role-bindings, organizations) to simplify layout
declaration and improve readability.
Additionally, expand the Oui types for Responsive<T> to allow an
explicit default key and tighten the union shape:
- add documentation comment recommending use of default for base value
- change Responsive<T> to T | (Partial<Record<Breakpoint,T>> & { default?: T })
Also fix a minor whitespace inconsistency in deployments page.
These changes make responsive grid usage consistent, clearer to
authors, and enable a more robust type for responsive props.
There was a problem hiding this comment.
Pull request overview
This PR standardizes responsive grid usage across admin/superadmin pages, introduces namespaced spacing CSS variables, and refines the shared Responsive<T> helper and class-mapping logic to support a default breakpoint-safe API.
Changes:
- Replace legacy
cols,colsMd,colsLg,colsXl, etc. props and ad‑hocclass="gap-*"usage on<OuiGrid>with a single:cols="{ ... }"responsive API and typedgapprops across superadmin/admin/org/billing pages. - Update the core OUI layout utilities: refine
Responsive<T>to allow an explicitdefaultkey and support object-based responsive values inresponsiveClass, and add namespaced CSS custom properties for padding/margin/gap to avoid Tailwind v4 naming conflicts. - Minor cleanup in deployments pages (centralized
useRouter()usage and a tiny class attribute whitespace tweak).
Reviewed changes
Copilot reviewed 17 out of 19 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| apps/dashboard/app/pages/superadmin/webhook-events.vue | Migrates summary metrics grid to :cols="{ sm: 1, md: 2, xl: 4 }" and standardized gap="md". |
| apps/dashboard/app/pages/superadmin/vps/[vpsId].vue | Updates multiple VPS detail grids to the new :cols responsive object API with consistent gaps. |
| apps/dashboard/app/pages/superadmin/users/[userId].vue | Switches the main user info grid to :cols="{ sm: 1, lg: 3 }" with gap="lg". |
| apps/dashboard/app/pages/superadmin/role-bindings.vue | Refactors the role-binding form layout grid to use the new :cols/gap API. |
| apps/dashboard/app/pages/superadmin/organizations/[orgId].vue | Uses :cols="{ sm: 1, lg: 3 }" for the organization info layout grid. |
| apps/dashboard/app/pages/superadmin/invoices.vue | Standardizes invoices summary metrics grid to :cols="{ sm: 1, md: 2, xl: 4 }" and gap="md". |
| apps/dashboard/app/pages/superadmin/index.vue | Converts overview metrics and lower dashboard grids to :cols objects and gap props (md/lg). |
| apps/dashboard/app/pages/superadmin/income.vue | Updates income summary and payment metric grids to the new responsive cols API and gap sizing. |
| apps/dashboard/app/pages/superadmin/dns.vue | Adjusts DNS server info grid to :cols="{ sm: 1, md: 2 }" with gap="md". |
| apps/dashboard/app/pages/superadmin/abuse.vue | Replaces multi-breakpoint column props with :cols="{ sm: 1, md: 2, xl: 5, '2xl': 6 }" and gap="md". |
| apps/dashboard/app/pages/organizations.vue | Standardizes several organization management grids to the :cols object API with gap="md"/"lg". |
| apps/dashboard/app/pages/deployments/index.vue | Reuses a single router instance instead of re-calling useRouter() inside helpers; keeps existing responsive grids. |
| apps/dashboard/app/pages/deployments/[id]/index.vue | Minor whitespace adjustment in a Hero icon container class list. |
| apps/dashboard/app/pages/billing.vue | Updates the organization selector grid to :cols="{ sm: 1, lg: 2 }" with gap="md". |
| apps/dashboard/app/pages/admin/quotas.vue | Migrates quota form grid to :cols="{ sm: 1, md: 2 }" and gap="md". |
| apps/dashboard/app/pages/admin/bindings.vue | Uses the new responsive cols object for basic/binding info grids with gap="md". |
| apps/dashboard/app/components/oui/types.d.ts | Refines Responsive<T> to `T |
| apps/dashboard/app/components/oui/classMaps.ts | Extends responsiveClass to handle a default key and centralizes breakpoint prefixes in a string-keyed map. |
| apps/dashboard/app/assets/css/tailwind/config.css | Adds namespaced --padding-*, --margin-*, and --gap-* custom properties derived from --oui-spacing-base to avoid Tailwind v4 spacing/container collisions. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Why
Notes