Skip to content

fix: Changed tailwind space to gap #5237

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
MichaelUnkey merged 9 commits into from
Mar 10, 2026
Merged

fix: Changed tailwind space to gap #5237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f1f288b
Changed tailwind space to gap
MichaelUnkey Mar 6, 2026
b9b1ebe
Merge branch 'main' of https://github.com/unkeyed/unkey into eng-2550…
MichaelUnkey Mar 6, 2026
440cb9d
Merge branch 'main' of https://github.com/unkeyed/unkey into eng-2550…
MichaelUnkey Mar 9, 2026
3e01f8c
coderabbit comments for spacing
MichaelUnkey Mar 9, 2026
bd55794
minor spacing adj
MichaelUnkey Mar 9, 2026
19a977e
Merge branch 'main' of https://github.com/unkeyed/unkey into eng-2550…
MichaelUnkey Mar 9, 2026
bba397a
Merge branch 'main' into eng-2550-vertical-spacing-off-in-modal-after…
MichaelUnkey Mar 9, 2026
379ce3e
Merge branch 'main' of https://github.com/unkeyed/unkey into eng-2550…
MichaelUnkey Mar 10, 2026
7de0bff
[autofix.ci] apply automated fixes
autofix-ci[bot] Mar 10, 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
4 changes: 2 additions & 2 deletions ...pp/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/credits-setup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export const UsageSetup = ({
};

return (
<div className="space-y-5 px-2 py-1">
<div className="flex flex-col gap-y-5 px-2 py-1">
{!overrideEnabled && (
<ProtectionSwitch
description="Turn on to limit how many times this key can be used. Once the limit
Expand Down Expand Up @@ -136,7 +136,7 @@ export const UsageSetup = ({
control={control}
name="limit.data.refill.interval"
render={({ field }) => (
<div className="space-y-1.5">
<div className="gap-y-1.5">
<div className="text-gray-11 text-[13px] flex items-center">Refill Rate</div>
<Select
onValueChange={(value) => {
Expand Down
2 changes: 1 addition & 1 deletion ...(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/expiration-setup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export const ExpirationSetup = ({
};

return (
<div className="space-y-5 px-2 py-1">
<div className="flex flex-col gap-y-5 px-2 py-1">
{!overrideEnabled && (
<ProtectionSwitch
description="Turn on to set an expiration date. When reached, the key will be automatically disabled."
Expand Down
4 changes: 2 additions & 2 deletions ...pp/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/general-setup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ export const GeneralSetup = () => {
} = useFormContext<FormValues>();

return (
<div className="space-y-5 px-2 py-1 ">
<div className="flex flex-col gap-y-5 px-2 py-1 ">
<FormInput
className="[&_input:first-of-type]:h-[36px]"
className="[&_input:first-of-type]:h-9"
placeholder="Enter name"
label="Name"
maxLength={256}
Expand Down
24 changes: 12 additions & 12 deletions ...apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ type RolesSectionProps = {
export const RolesSection: React.FC<RolesSectionProps> = ({ roles }) => {
if (!roles || roles.length === 0) {
return (
<div className="flex flex-col gap-1 mt-[16px] px-4">
<div className="flex flex-col gap-1 mt-4 px-4">
<div className="border bg-gray-2 border-gray-4 rounded-[10px]">
<div className="text-gray-11 text-[12px] leading-6 px-[14px] py-1.5 font-sans">Roles</div>
<div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2">
<div className="text-gray-11 text-[12px] leading-6 px-3.5 py-1.5 font-sans">Roles</div>
<div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-4 py-2">
<span className="text-xs text-gray-11">No roles assigned</span>
</div>
</div>
Expand All @@ -24,12 +24,12 @@ export const RolesSection: React.FC<RolesSectionProps> = ({ roles }) => {
}

return (
<div className="flex flex-col gap-1 mt-[16px] px-4">
<div className="flex flex-col gap-1 mt-4 px-4">
<div className="border bg-gray-2 border-gray-4 rounded-[10px]">
<div className="text-gray-11 text-xs leading-6 px-[14px] py-1.5 font-sans">
<div className="text-gray-11 text-xs leading-6 px-4 py-1.5 font-sans">
Roles ({roles.length})
</div>
<div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2 space-y-2">
<div className="flex flex-col border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2 gap-2">
{roles.map((role) => (
<div
key={role.name}
Expand Down Expand Up @@ -68,12 +68,12 @@ type PermissionsSectionProps = {
export const PermissionsSection = ({ permissions }: PermissionsSectionProps) => {
if (!permissions || permissions.length === 0) {
return (
<div className="flex flex-col gap-1 mt-[16px] px-4">
<div className="flex flex-col gap-1 mt-4 px-4">
<div className="border bg-gray-2 border-gray-4 rounded-[10px]">
<div className="text-gray-11 text-[12px] leading-6 px-[14px] py-1.5 font-sans">
<div className="text-gray-11 text-[12px] leading-6 px-3.5 py-1.5 font-sans">
Permissions
</div>
<div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2">
<div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-4 py-2">
<span className="text-xs text-gray-11">No permissions assigned</span>
</div>
</div>
Expand All @@ -82,9 +82,9 @@ export const PermissionsSection = ({ permissions }: PermissionsSectionProps) =>
}

return (
<div className="flex flex-col gap-1 mt-[16px] px-4">
<div className="flex flex-col gap-1 mt-4 px-4">
<div className="border bg-gray-2 border-gray-4 rounded-[10px] relative">
<div className="text-gray-11 text-xs leading-6 px-[14px] py-1.5 font-sans flex items-center justify-between">
<div className="text-gray-11 text-xs leading-6 px-3.5 py-1.5 font-sans flex items-center justify-between gap-2">
<span>Permissions ({permissions.length})</span>
{permissions.length > 1 && (
<CopyButton
Expand All @@ -103,7 +103,7 @@ export const PermissionsSection = ({ permissions }: PermissionsSectionProps) =>
/>
)}
</div>
<div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2 space-y-2">
<div className="flex flex-col border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2 gap-2">
{permissions.map((permission) => (
<div
key={permission.name}
Expand Down
4 changes: 2 additions & 2 deletions .../[keyAuthId]/_components/components/table/components/actions/components/edit-key-name.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,9 @@ export const EditKeyName = ({ keyDetails, isOpen, onClose }: EditKeyNameProps) =
<div className="py-1 my-2">
<div className="h-px bg-grayA-3 w-full" />
</div>
<div className="space-y-4">
<div>
<FormInput
className="[&_input:first-of-type]:h-[36px]"
className="[&_input:first-of-type]:h-9"
placeholder="Key Name"
label="Name"
defaultValue={keyDetails.name ?? ""}
Expand Down
4 changes: 2 additions & 2 deletions ...s/actions/components/edit-rbac/components/assign-permission/create-permission-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,15 @@ export function createPermissionOptions({
side="right"
align="start"
sideOffset={30}
className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-100"
className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-80 z-100"
>
<div className="flex flex-col h-full">
{/* Header */}
<div className="px-4 py-2 border-b border-grayA-4 text-gray-10 text-xs font-medium bg-grayA-2">
Permission Details
</div>
{/* Content */}
<div className="px-4 py-3 space-y-3">
<div className="flex flex-col gap-3 px-4 py-3">
<div>
<div className="text-xs font-medium text-gray-11 mb-1">Permission ID</div>
<div className="text-xs text-gray-12 font-mono break-all">{permission.id}</div>
Expand Down
2 changes: 1 addition & 1 deletion ...omponents/actions/components/edit-rbac/components/assign-permission/permissions-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ export const PermissionField = ({
const isComboboxLoading = isLoading || (isSearching && trimmedSearchVal.length > 0);

return (
<div className="space-y-3">
<div className="flex flex-col gap-3">
<FormCombobox
label="Assign permissions"
description="Select permissions from your workspace."
Expand Down
4 changes: 2 additions & 2 deletions ...ble/components/actions/components/edit-rbac/components/assign-role/create-key-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,15 @@ export function createRoleOptions({
side="right"
align="start"
sideOffset={30}
className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-[320px] z-100"
className="drop-shadow-2xl transform-gpu border border-grayA-4 overflow-hidden rounded-[10px] p-0 bg-white dark:bg-black w-80 z-100"
>
<div className="flex flex-col h-full">
{/* Header */}
<div className="px-4 py-2 border-b border-grayA-4 text-gray-10 text-xs font-medium bg-grayA-2">
Role Details
</div>
{/* Content */}
<div className="px-4 py-3 space-y-3">
<div className="flex flex-col px-4 py-3 gap-3">
<div>
<div className="text-xs font-medium text-gray-11 mb-1">Role Name</div>
<div className="text-xs text-gray-12 break-all">{role.name}</div>
Expand Down
2 changes: 1 addition & 1 deletion ...nents/table/components/actions/components/edit-rbac/components/assign-role/role-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export const RoleField = ({

const isComboboxLoading = isLoading || (isSearching && trimmedSearchVal.length > 0);
return (
<div className="space-y-3">
<div className="flex flex-col gap-3">
<FormCombobox
label="Assign roles"
description="Select roles from your workspace."
Expand Down
2 changes: 1 addition & 1 deletion ...ts/components/table/components/actions/components/edit-rbac/components/granted-access.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const GrantedAccess = ({
return (
<motion.div
layout
className="space-y-3"
className="flex flex-col gap-3"
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
Expand Down
2 changes: 1 addition & 1 deletion ...keyAuthId]/_components/components/table/components/actions/components/edit-rbac/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ export const KeyRbacDialog = ({
</div>
}
>
<div className="space-y-5 px-2 py-1">
<div className="flex flex-col gap-5 px-2 py-1">
<KeyInfo
keyDetails={{
id: existingKey.id,
Expand Down
2 changes: 1 addition & 1 deletion ...Slug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const LastUsedCell = ({
</div>
<div className="truncate">
{isLoading ? (
<div className="flex items-center w-full space-x-1">
<div className="flex items-center w-full gap-1">
<div className="h-2 w-2 bg-grayA-5 rounded-full animate-pulse" />
<div className="h-2 w-12 bg-grayA-5 rounded-sm animate-pulse" />
<div className="h-2 w-12 bg-grayA-5 rounded-sm animate-pulse" />
Expand Down
2 changes: 1 addition & 1 deletion ...Slug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/skeletons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const LastUsedColumnSkeleton = () => (

export const StatusColumnSkeleton = () => (
<div
className="flex w-[100px] items-center h-[22px] space-x-2 px-1.5 py-1 rounded-md bg-grayA-3 animate-pulse"
className="flex w-25 items-center h-5.5 gap-2 px-1.5 py-1 rounded-md bg-grayA-3 animate-pulse"
aria-busy="true"
aria-live="polite"
>
Expand Down
2 changes: 1 addition & 1 deletion ...is/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const StatusDisplay = ({ keyAuthId, keyData, isSelected }: StatusDisplayP
if (isLoading) {
return (
<div
className="flex w-[100px] items-center h-[22px] space-x-1 px-1.5 py-1 rounded-md bg-grayA-3"
className="flex w-25 items-center h-5.5 gap-1 px-1.5 py-1 rounded-md bg-grayA-3"
aria-busy="true"
aria-live="polite"
>
Expand Down
4 changes: 2 additions & 2 deletions web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-api.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,13 +137,13 @@ export const DeleteApi: React.FC<Props> = ({ api, keys }) => {
permanently lost.
</p>
<form id="delete-api-form" onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-1">
<div className="flex flex-col gap-1">
<p className="text-gray-11 text-[13px]">
Type <span className="text-gray-12 font-medium">{api.name}</span> to confirm
</p>
<Input {...register("name")} placeholder={`Enter "${api.name}" to confirm`} />
</div>
<div className="space-y-1 mt-6">
<div className="flex flex-col gap-1 mt-6">
<p className="text-gray-11 text-[13px]">
To verify, type <span className="text-gray-12 font-medium">{intent}</span> to confirm
</p>
Expand Down
2 changes: 1 addition & 1 deletion ...ashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-protection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export const DeleteProtection: React.FC<Props> = ({ api }) => {
/>
</p>
<form id="delete-protection-form" onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-1">
<div className="flex flex-col gap-1">
<p className="text-gray-11 text-[13px]">
Type <span className="text-gray-12 font-medium">{api.name}</span> to confirm
</p>
Expand Down
6 changes: 3 additions & 3 deletions web/apps/dashboard/app/(app)/[workspaceSlug]/apis/_components/api-list-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,20 +79,20 @@ export const ApiListClient = ({ workspaceSlug }: { workspaceSlug: string }) => {
))}
</div>

<div className="flex flex-col items-center justify-center mt-8 space-y-4 pb-8">
<div className="flex flex-col items-center justify-center mt-8 pb-8 gap-4">
<div className="text-center text-sm text-accent-11">
Showing {apiList.length} of {apisData?.pages[0]?.total || 0} APIs
</div>

{!isSearching && hasNextPage && (
<Button onClick={loadMore} disabled={isFetchingNextPage} size="md">
{isFetchingNextPage ? (
<div className="flex items-center space-x-2">
<div className="flex flex-row items-center gap-2">
<div className="animate-spin h-4 w-4 border-2 border-gray-7 border-t-transparent rounded-full" />
<span>Loading...</span>
</div>
) : (
<div className="flex items-center space-x-2">
<div className="flex flex-row items-center gap-2">
<span>Load more</span>
</div>
)}
Expand Down
8 changes: 4 additions & 4 deletions ...pp/(app)/[workspaceSlug]/authorization/permissions/components/upsert-permission/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,9 +175,9 @@ export const UpsertPermissionDialog = ({
</div>
}
>
<div className="space-y-5 px-2 py-1">
<div className="flex flex-col gap-5 px-2 py-1">
<FormInput
className="[&_input:first-of-type]:h-[36px]"
className="[&_input:first-of-type]:h-9"
placeholder="Manage Domains"
label="Name"
maxLength={512}
Expand All @@ -189,7 +189,7 @@ export const UpsertPermissionDialog = ({
/>

<FormInput
className="[&_input:first-of-type]:h-[36px]"
className="[&_input:first-of-type]:h-9"
placeholder="manage.domains"
label="Slug"
maxLength={128}
Expand All @@ -201,7 +201,7 @@ export const UpsertPermissionDialog = ({
/>

<FormTextarea
className="[&_input:first-of-type]:h-[36px]"
className="[&_input:first-of-type]:h-9"
label="Description"
placeholder="Allows user to create, update, and delete domain configurations and DNS records"
maxLength={512}
Expand Down
2 changes: 1 addition & 1 deletion ...]/authorization/roles/components/upsert-role/components/assign-key/create-key-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export function createKeyOptions({
Key Details
</div>
{/* Content */}
<div className="px-4 py-3 space-y-3">
<div className="flex flex-col px-4 py-3 gap-3">
<div>
<div className="text-xs font-medium text-gray-11 mb-1">Key ID</div>
<div className="text-xs text-gray-12 font-mono break-all">{key.id}</div>
Expand Down
2 changes: 1 addition & 1 deletion ...spaceSlug]/authorization/roles/components/upsert-role/components/assign-key/key-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const KeyField = ({
const isComboboxLoading = isLoading || (isSearching && searchValue.trim().length > 0);

return (
<div className="space-y-3">
<div className="flex flex-col gap-3">
<FormCombobox
optional
label="Assign keys"
Expand Down
2 changes: 1 addition & 1 deletion ...n/roles/components/upsert-role/components/assign-permission/create-permission-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function createPermissionOptions({
Permission Details
</div>
{/* Content */}
<div className="px-4 py-3 space-y-3">
<div className="flex flex-col px-4 py-3 gap-3">
<div>
<div className="text-xs font-medium text-gray-11 mb-1">Permission ID</div>
<div className="text-xs text-gray-12 font-mono break-all">{permission.id}</div>
Expand Down
2 changes: 1 addition & 1 deletion ...orization/roles/components/upsert-role/components/assign-permission/permissions-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export const PermissionField = ({
const isComboboxLoading = isLoading || (isSearching && searchValue.trim().length > 0);

return (
<div className="space-y-3">
<div className="flex flex-col gap-3">
<FormCombobox
optional
label="Assign permissions"
Expand Down
4 changes: 2 additions & 2 deletions .../dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,9 +196,9 @@ export const UpsertRoleDialog = ({
</div>
}
>
<div className="space-y-5 px-2 py-1">
<div className="flex flex-col gap-5 px-2 py-1">
<FormInput
className="[&_input:first-of-type]:h-[36px]"
className="[&_input:first-of-type]:h-9"
placeholder="domain.manager"
label="Name"
maxLength={512}
Expand Down
2 changes: 1 addition & 1 deletion ...apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/dialogs/general-setup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const GeneralSetup = () => {
} = useFormContext<FormValues>();

return (
<div className="space-y-5 px-2 py-1">
<div className="flex flex-col gap-5 px-2 py-1">
<FormInput
label="External ID"
description="A unique identifier for this identity (3-255 characters)"
Expand Down
2 changes: 1 addition & 1 deletion web/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/table/last-used.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const LastUsedCell = ({ identityId }: { identityId: string }) => {
</div>
<div className="truncate">
{isLoading ? (
<div className="flex items-center w-full space-x-1">
<div className="flex items-center w-full gap-1">
<div className="h-2 w-2 bg-grayA-5 rounded-full animate-pulse" />
<div className="h-2 w-12 bg-grayA-5 rounded-sm animate-pulse" />
<div className="h-2 w-12 bg-grayA-5 rounded-sm animate-pulse" />
Expand Down
2 changes: 1 addition & 1 deletion ...view)/deployments/[deploymentId]/network/unkey-flow/components/canvas/canvas-boundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const CanvasBoundary = ({ children }: PropsWithChildren) => {
</div>

{/* Error message */}
<div className="p-4 space-y-2">
<div className="flex flex-col p-4 gap-2">
<div className="text-xs font-medium text-gray-11">{error.message}</div>
<div className="text-xs text-gray-9">Check console for details</div>
</div>
Expand Down
Loading
Loading