Skip to content

feat-namespaced-spacing-and-responsive-cols #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
veryCrunchy merged 2 commits into from
Feb 1, 2026
Merged

feat-namespaced-spacing-and-responsive-cols #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb0753c
feat(css): add namespaced spacing variables for padding/margin/gap
veryCrunchy Feb 1, 2026
7f16339
feat(ui): use responsive cols prop and refine Responsive type
veryCrunchy Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions apps/dashboard/app/assets/css/tailwind/config.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,28 @@
--radius-4xl: calc(2rem * var(--oui-radius-base, 1));

--spacing: calc(0.25rem * var(--oui-spacing-base, 1));

/* Named spacing for padding/margin/gap utilities.
Uses per-utility namespaces to avoid colliding with --container-*
(Tailwind v4 resolves max-w-xl via --spacing-xl before --container-xl). */
--padding-xs: calc(0.25rem * var(--oui-spacing-base, 1));
--padding-sm: calc(0.5rem * var(--oui-spacing-base, 1));
--padding-md: calc(1rem * var(--oui-spacing-base, 1));
--padding-lg: calc(1.5rem * var(--oui-spacing-base, 1));
--padding-xl: calc(2rem * var(--oui-spacing-base, 1));
--padding-2xl: calc(3rem * var(--oui-spacing-base, 1));
--margin-xs: calc(0.25rem * var(--oui-spacing-base, 1));
--margin-sm: calc(0.5rem * var(--oui-spacing-base, 1));
--margin-md: calc(1rem * var(--oui-spacing-base, 1));
--margin-lg: calc(1.5rem * var(--oui-spacing-base, 1));
--margin-xl: calc(2rem * var(--oui-spacing-base, 1));
--margin-2xl: calc(3rem * var(--oui-spacing-base, 1));
--gap-xs: calc(0.25rem * var(--oui-spacing-base, 1));
--gap-sm: calc(0.5rem * var(--oui-spacing-base, 1));
--gap-md: calc(1rem * var(--oui-spacing-base, 1));
--gap-lg: calc(1.5rem * var(--oui-spacing-base, 1));
--gap-xl: calc(2rem * var(--oui-spacing-base, 1));
--gap-2xl: calc(3rem * var(--oui-spacing-base, 1));
--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
Expand Down
10 changes: 6 additions & 4 deletions apps/dashboard/app/components/oui/classMaps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,9 +225,10 @@ export function responsiveClass<T extends string | number>(
return mapped ? [mapped] : [];
}

// Now TypeScript knows value is Partial<Record<Breakpoint, T>>
// Object form: { default?: T; sm?: T; md?: T; lg?: T; xl?: T; "2xl"?: T }
const classes: string[] = [];
const breakpointPrefix: Record<Breakpoint, string> = {
const breakpointPrefix: Record<string, string> = {
default: "",
sm: "sm:",
md: "md:",
lg: "lg:",
Expand All @@ -237,9 +238,10 @@ export function responsiveClass<T extends string | number>(

Object.entries(value).forEach(([k, candidate]) => {
if (candidate === undefined) return;
const bp = k as Breakpoint;
const prefix = breakpointPrefix[k];
if (prefix === undefined) return;
const mapped = map[String(candidate)];
if (mapped) classes.push(`${breakpointPrefix[bp]}${mapped}`);
if (mapped) classes.push(`${prefix}${mapped}`);
});

return classes;
Expand Down
7 changes: 5 additions & 2 deletions apps/dashboard/app/components/oui/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,8 +162,11 @@ export type Breakpoint = "sm" | "md" | "lg" | "xl" | "2xl";

/**
* Responsive<T> - either a single value T or an object keyed by breakpoints.
* Use `default` for the base (no breakpoint prefix) value.
* Example:
* T
* | { sm?: T; md?: T; lg?: T; ... }
* | { default?: T; sm?: T; md?: T; lg?: T; ... }
*/
export type Responsive<T extends string | number> = T | Partial<Record<Breakpoint, T>>;
export type Responsive<T extends string | number> =
| T
| (Partial<Record<Breakpoint, T>> & { default?: T });
4 changes: 2 additions & 2 deletions apps/dashboard/app/pages/admin/bindings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<OuiText size="sm" weight="semibold" transform="uppercase" class="tracking-wide" color="secondary">
Basic Information
</OuiText>
<OuiGrid cols="1" colsMd="3" gap="md">
<OuiGrid :cols="{ sm: 1, md: 3 }" gap="md">
<OuiStack gap="xs">
<OuiText size="sm" weight="medium">Organization</OuiText>
<OuiSelect v-model="selectedOrg" :items="orgItems" />
Expand Down Expand Up @@ -60,7 +60,7 @@
</OuiButton>
</OuiFlex>

<OuiGrid cols="1" colsMd="2" gap="md">
<OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
<OuiStack gap="xs">
<OuiText size="sm" weight="medium">Resource Type</OuiText>
<OuiSelect
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/app/pages/admin/quotas.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<OuiCard>
<OuiCardBody>
<form @submit.prevent="save">
<OuiGrid cols="1" colsMd="2" gap="md">
<OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
<OuiSelect
label="Organization"
v-model="selectedOrg"
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/app/pages/billing.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1198,7 +1198,7 @@
<OuiCardBody>
<OuiStack gap="lg">
<!-- Organization Selector -->
<OuiGrid cols="1" colsLg="2" gap="md">
<OuiGrid :cols="{ sm: 1, lg: 2 }" gap="md">
<OuiStack gap="xs">
<OuiText size="sm" weight="medium">Select Organization</OuiText>
<OuiSelect
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/app/pages/deployments/[id]/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
p="xs"
rounded="lg"
bg="accent-primary"
class="bg-primary/10 ring-1 ring-primary/20 shrink-0 md:p-sm md:rounded-xl"
class="bg-primary/10 ring-1 ring-primary/20 shrink-0 md:p-sm md:rounded-xl"
>
<RocketLaunchIcon
class="w-6 h-6 md:w-8 md:h-8 text-primary"
Expand Down
2 changes: 0 additions & 2 deletions apps/dashboard/app/pages/deployments/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -863,7 +863,6 @@
};

const viewDeployment = (id: string) => {
const router = useRouter();
router.push(`/deployments/${id}`);
};

Expand Down Expand Up @@ -911,7 +910,6 @@

// Navigate to the detail page to finish configuration
if (deployment) {
const router = useRouter();
router.push(`/deployments/${deployment.id}`);
}
} catch (error) {
Expand Down
10 changes: 5 additions & 5 deletions apps/dashboard/app/pages/organizations.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1129,7 +1129,7 @@

<template>
<OuiStack gap="lg">
<OuiGrid cols="1" colsLg="3" gap="lg">
<OuiGrid :cols="{ sm: 1, lg: 3 }" gap="lg">
<OuiCard class="col-span-2">
<OuiCardHeader>
<OuiFlex align="center" justify="between">
Expand All @@ -1142,7 +1142,7 @@
</OuiCardHeader>
<OuiCardBody>
<OuiStack gap="lg">
<OuiGrid cols="1" colsLg="2" gap="md">
<OuiGrid :cols="{ sm: 1, lg: 2 }" gap="md">
<OuiStack gap="xs">
<OuiText size="sm" weight="medium">Select Organization</OuiText>
<OuiSelect
Expand Down Expand Up @@ -1242,7 +1242,7 @@

<OuiStack gap="md" as="form" @submit.prevent="createOrg">
<OuiText size="sm" weight="medium">Create Organization</OuiText>
<OuiGrid cols="1" colsLg="2" gap="md">
<OuiGrid :cols="{ sm: 1, lg: 2 }" gap="md">
<OuiInput
v-model="name"
label="Name"
Expand Down Expand Up @@ -1440,7 +1440,7 @@

<OuiStack gap="md" class="mt-6">
<OuiText size="md" weight="semibold">Invite Member</OuiText>
<OuiGrid cols="1" colsLg="3" gap="md">
<OuiGrid :cols="{ sm: 1, lg: 3 }" gap="md">
<OuiInput
label="Email"
v-model="inviteEmail"
Expand Down Expand Up @@ -1536,7 +1536,7 @@
System roles appear first. Any custom roles you create follow
below.
</OuiText>
<OuiGrid cols="1" colsLg="2" gap="md">
<OuiGrid :cols="{ sm: 1, lg: 2 }" gap="md">
<OuiCard v-for="item in roleItems" :key="item.value">
<OuiCardBody>
<OuiStack gap="xs">
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/app/pages/superadmin/abuse.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</OuiFlex>

<!-- Metrics Overview -->
<OuiGrid class="gap-4" cols="1" colsMd="2" colsXl="5" cols2xl="6">
<OuiGrid :cols="{ sm: 1, md: 2, xl: 5, '2xl': 6 }" gap="md">
<OuiCard
v-for="metric in metrics"
:key="metric.label"
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/app/pages/superadmin/dns.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@
<!-- DNS Server Info -->
<OuiStack gap="md">
<OuiText size="lg" weight="semibold">DNS Server Info</OuiText>
<OuiGrid cols="1" colsMd="2" gap="md">
<OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
<div>
<OuiText
size="xs"
Expand Down
4 changes: 2 additions & 2 deletions apps/dashboard/app/pages/superadmin/income.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</OuiFlex>

<!-- Summary Metrics -->
<OuiGrid class="gap-4" cols="1" colsMd="2" colsXl="4">
<OuiGrid :cols="{ sm: 1, md: 2, xl: 4 }" gap="md">
<OuiCard
v-for="metric in summaryMetrics"
:key="metric.label"
Expand Down Expand Up @@ -64,7 +64,7 @@
<OuiText tag="h2" size="xl" weight="bold">Payment Metrics</OuiText>
</OuiCardHeader>
<OuiCardBody class="p-6">
<OuiGrid cols="1" colsMd="3" gap="md">
<OuiGrid :cols="{ sm: 1, md: 3 }" gap="md">
<div>
<OuiText size="sm" color="muted">Success Rate</OuiText>
<OuiText size="2xl" weight="semibold">
Expand Down
4 changes: 2 additions & 2 deletions apps/dashboard/app/pages/superadmin/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
>
</OuiStack>

<OuiGrid class="gap-4" cols="1" colsMd="2" colsXl="4">
<OuiGrid :cols="{ sm: 1, md: 2, xl: 4 }" gap="md">
<OuiCard
v-for="metric in metrics"
:key="metric.label"
Expand Down Expand Up @@ -132,7 +132,7 @@
</OuiCardBody>
</OuiCard>

<OuiGrid class="gap-6" cols="1" colsXl="2">
<OuiGrid :cols="{ sm: 1, xl: 2 }" gap="lg">
<OuiCard
class="border border-border-muted rounded-xl overflow-hidden"
>
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/app/pages/superadmin/invoices.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
</OuiFlex>

<!-- Summary Metrics -->
<OuiGrid class="gap-4" cols="1" colsMd="2" colsXl="4">
<OuiGrid :cols="{ sm: 1, md: 2, xl: 4 }" gap="md">
<OuiCard
v-for="metric in metrics"
:key="metric.label"
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/app/pages/superadmin/organizations/[orgId].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</OuiStack>
</OuiFlex>

<OuiGrid cols="1" colsLg="3" gap="lg">
<OuiGrid :cols="{ sm: 1, lg: 3 }" gap="lg">
<!-- Organization Info Card -->
<OuiCard class="border border-border-muted rounded-xl">
<OuiCardHeader class="px-6 py-4 border-b border-border-muted">
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/app/pages/superadmin/role-bindings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</OuiCardHeader>
<OuiCardBody>
<form @submit.prevent="createBinding">
<OuiGrid cols="1" colsMd="2" gap="md">
<OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
<OuiStack gap="xs">
<OuiText size="sm" weight="medium">User</OuiText>
<OuiCombobox
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/app/pages/superadmin/users/[userId].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</OuiStack>
</OuiFlex>

<OuiGrid cols="1" colsLg="3" gap="lg">
<OuiGrid :cols="{ sm: 1, lg: 3 }" gap="lg">
<!-- User Info Card -->
<OuiCard class="border border-border-muted rounded-xl">
<OuiCardHeader class="px-6 py-4 border-b border-border-muted">
Expand Down
12 changes: 6 additions & 6 deletions apps/dashboard/app/pages/superadmin/vps/[vpsId].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
</OuiFlex>
</OuiFlex>

<OuiGrid cols="1" colsLg="2" gap="lg">
<OuiGrid :cols="{ sm: 1, lg: 2 }" gap="lg">
<!-- VPS Info & Specifications Card -->
<OuiCard class="border border-border-muted rounded-xl">
<OuiCardHeader class="px-6 py-4 border-b border-border-muted">
Expand All @@ -47,7 +47,7 @@
</OuiText>
</OuiStack>

<OuiGrid cols="1" colsMd="2" gap="md" class="border-t border-border-muted pt-4">
<OuiGrid :cols="{ sm: 1, md: 2 }" gap="md" class="border-t border-border-muted pt-4">
<OuiStack gap="xs">
<OuiText size="sm" weight="medium" color="muted">Status</OuiText>
<SuperadminStatusBadge
Expand Down Expand Up @@ -136,7 +136,7 @@
<OuiText tag="h2" size="lg" weight="bold">Specifications</OuiText>
</OuiCardHeader>
<OuiCardBody class="p-6">
<OuiGrid cols="1" colsMd="2" gap="md">
<OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
<OuiStack gap="xs">
<OuiText size="sm" weight="medium" color="muted">Size</OuiText>
<OuiText>{{ vps?.size || "—" }}</OuiText>
Expand Down Expand Up @@ -167,14 +167,14 @@
</OuiGrid>

<!-- Network & Actions Row -->
<OuiGrid cols="1" colsLg="2" gap="lg">
<OuiGrid :cols="{ sm: 1, lg: 2 }" gap="lg">
<!-- Network & SSH Card -->
<OuiCard class="border border-border-muted rounded-xl">
<OuiCardHeader class="px-6 py-4 border-b border-border-muted">
<OuiText tag="h2" size="lg" weight="bold">Network & Access</OuiText>
</OuiCardHeader>
<OuiCardBody class="p-6">
<OuiGrid cols="1" colsMd="2" gap="md">
<OuiGrid :cols="{ sm: 1, md: 2 }" gap="md">
<OuiStack gap="xs">
<OuiText size="sm" weight="medium" color="muted">IPv4 Addresses</OuiText>
<OuiStack gap="xs">
Expand Down Expand Up @@ -224,7 +224,7 @@

<OuiStack gap="xs" v-if="hasMetadata" class="col-span-1 md:col-span-2">
<OuiText size="sm" weight="medium" color="muted">Metadata</OuiText>
<OuiGrid cols="1" colsMd="2" gap="xs">
<OuiGrid :cols="{ sm: 1, md: 2 }" gap="xs">
<OuiText
v-for="(value, key) in parsedMetadata"
:key="key"
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/app/pages/superadmin/webhook-events.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</OuiFlex>

<!-- Summary Metrics -->
<OuiGrid class="gap-4" cols="1" colsMd="2" colsXl="4">
<OuiGrid :cols="{ sm: 1, md: 2, xl: 4 }" gap="md">
<OuiCard
v-for="metric in metrics"
:key="metric.label"
Expand Down
Loading