fix: Changed tailwind space to gap#5237
Merged
MichaelUnkey merged 9 commits intomainfrom Mar 10, 2026
Merged
Conversation
MichaelUnkey
requested review from
Flo4604,
chronark,
imeyer,
mcstepp,
ogzhanolguncu and
perkinsjr
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis pull request systematically refactors CSS spacing utilities across the dashboard codebase, converting Tailwind's legacy Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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 |
…-vertical-spacing-off-in-modal-after-tailwind-migration
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/simulate/tree-generate.tsx (1)
184-221:⚠️ Potential issue | 🟠 MajorReplace type assertions with a parser at the input boundary.
Lines 194 and 211 use
as "vertical" | "horizontal"to assert unvalidated DOM strings directly into state. Per repository guidelines, this compromises type safety and makes invalid states representable.♻️ Minimal fix
+type LayoutDirection = GeneratorConfig["regionDirection"]; + +const parseLayoutDirection = (value: string): LayoutDirection | null => { + switch (value) { + case "horizontal": + case "vertical": + return value; + default: + return null; + } +}; + export function InternalDevTreeGenerator({ onGenerate, onReset }: DevTreeGeneratorProps) { @@ <select value={customConfig.regionDirection} - onChange={(e) => - setCustomConfig((c) => ({ - ...c, - regionDirection: e.target.value as "vertical" | "horizontal", - })) - } + onChange={(e) => { + const regionDirection = parseLayoutDirection(e.target.value); + if (!regionDirection) return; + setCustomConfig((c) => ({ + ...c, + regionDirection, + })); + }} @@ <select value={customConfig.instanceDirection} - onChange={(e) => - setCustomConfig((c) => ({ - ...c, - instanceDirection: e.target.value as "vertical" | "horizontal", - })) - } + onChange={(e) => { + const instanceDirection = parseLayoutDirection(e.target.value); + if (!instanceDirection) return; + setCustomConfig((c) => ({ + ...c, + instanceDirection, + })); + }}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/apps/dashboard/app/`(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/simulate/tree-generate.tsx around lines 184 - 221, The onChange handlers for the two select elements are using type assertions (e.target.value as "vertical" | "horizontal") which allows invalid DOM strings into state; replace these assertions with an input-bound parser/validator that checks e.target.value and only returns "horizontal" or "vertical" (or a safe default) before calling setCustomConfig; implement a small type-guard/parse function (e.g., parseDirection) and use it in the onChange for the regionDirection and instanceDirection updates, leaving generateMutation.disabled logic unchanged.web/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/namespace-delete-dialog.tsx (1)
83-89:⚠️ Potential issue | 🔴 CriticalDeletion confirmation is still bypassable.
The exact-name check only disables the footer button. Because the schema currently accepts any string, pressing Enter in the input still reaches
onSubmitand deletes the namespace without a matching confirmation value. Please enforce thename === namespace.namecheck in the submit path as well.🛡️ Minimal guard
- const onSubmit = async () => { + const onSubmit = async ({ name }: FormValues) => { + if (name !== namespace.name) { + return; + } collection.ratelimitNamespaces.delete(namespace.id); router.push(`/${workspace.slug}/ratelimits`); //await deleteNamespace.mutateAsync({ namespaceId: namespace.id }); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/apps/dashboard/app/`(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/namespace-delete-dialog.tsx around lines 83 - 89, The form currently only disables the footer button but doesn't enforce the confirmation on submit; update the submit handler (the function passed as onSubmit to handleSubmit, i.e., onSubmit) to verify that the registered field value (registered via register("name")) exactly equals namespace.name before proceeding with deletion; if it does not match, abort the deletion flow and surface an error via the form API (e.g., setError) or return early so pressing Enter cannot bypass confirmation in the "delete-namespace-form".web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/credits-setup.tsx (1)
139-167:⚠️ Potential issue | 🟠 MajorMissing flex context breaks spacing.
The
gap-y-1.5utility requires a flex or grid context to work. Withoutflex flex-col, the gap will have no effect and the label, Select, and FormDescription will have no vertical spacing between them.Proposed fix
- <div className="gap-y-1.5"> + <div className="flex flex-col gap-y-1.5"> <div className="text-gray-11 text-[13px] flex items-center">Refill Rate</div> <Select🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/apps/dashboard/app/`(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/credits-setup.tsx around lines 139 - 167, The container div currently using the utility "gap-y-1.5" has no flex/grid context so gaps do nothing; update the div wrapping the label, Select and FormDescription (the div with className "gap-y-1.5" in credits-setup.tsx) to include a layout context such as "flex flex-col gap-y-1.5" so vertical spacing between the label, Select (Select, SelectTrigger, SelectContent, SelectItem) and FormDescription is applied.web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/permissions/components/upsert-permission/index.tsx (1)
203-212:⚠️ Potential issue | 🟡 MinorCSS selector won't match textarea element.
The selector
[&_input:first-of-type]targets<input>elements, butFormTextarearenders a<textarea>. This height class will have no effect.Proposed fix
<FormTextarea - className="[&_input:first-of-type]:h-9" + className="[&_textarea:first-of-type]:h-9" label="Description"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/apps/dashboard/app/`(app)/[workspaceSlug]/authorization/permissions/components/upsert-permission/index.tsx around lines 203 - 212, The height utility is targeting inputs but FormTextarea renders a <textarea>, so update the class on the FormTextarea (the className that currently contains "[&_input:first-of-type]:h-9") to target the textarea element instead (e.g. use a selector that matches textarea such as "[&_textarea:first-of-type]:h-9" or an equivalent selector that correctly selects the rendered <textarea>) so the height rule applies.
🧹 Nitpick comments (1)
web/apps/dashboard/components/ui/sheet.tsx (1)
97-102: Consider adding base gap for mobile layout.The
sm:gap-2only applies gap on small screens and up. In mobile view (flex-col-reverse), there will be no gap between footer items. If this is intentional for tight mobile spacing, this is fine; otherwise, consider adding a basegap-2.Optional: Add base gap for consistency
<div - className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2", className)} + className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/apps/dashboard/components/ui/sheet.tsx` around lines 97 - 102, SheetFooter currently uses "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2" so the gap only applies at sm and above; add a base gap (e.g. "gap-2") to apply spacing in the mobile flex-col-reverse layout. Update the className string in the SheetFooter component (the JSX div using cn) to include the base gap alongside the existing sm:gap-2 so mobile and larger screens both get consistent spacing.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@web/apps/dashboard/app/`(app)/[workspaceSlug]/apis/_components/api-list-client.tsx:
- Line 82: The footer's spacing was tightened by changing the utility from
space-y-4 to gap-1; restore the original spacing by using gap-4 (or the original
space-y-4 equivalent) on the container div (the element with className "flex
flex-col items-center justify-center mt-8 pb-8 ...") so the vertical spacing
between the count label and CTA matches the previous design.
In
`@web/apps/dashboard/app/`(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx:
- Around line 27-32: The Roles section has a 2px horizontal padding mismatch
between the empty-state container (uses class "px-[14px]") and the populated
header (uses "px-4"); update the empty-state element in roles-permissions.tsx to
use "px-4" (or alternatively change the header to "px-3.5" if you prefer 14px
total) so both the header and empty state share the same horizontal padding
class for visual consistency.
In
`@web/apps/dashboard/app/`(app)/[workspaceSlug]/projects/new/steps/deployment-live.tsx:
- Line 94: The div in deployment-live.tsx uses an invalid Tailwind class "w-225"
which will be ignored; revert this by replacing "w-225" in the className string
on the div (the one currently set to "w-225 flex flex-col gap-6") with the
original valid width utility "w-[900px]" so the container regains its 900px
constraint (leave the "flex flex-col gap-6" change intact).
---
Outside diff comments:
In
`@web/apps/dashboard/app/`(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/credits-setup.tsx:
- Around line 139-167: The container div currently using the utility "gap-y-1.5"
has no flex/grid context so gaps do nothing; update the div wrapping the label,
Select and FormDescription (the div with className "gap-y-1.5" in
credits-setup.tsx) to include a layout context such as "flex flex-col gap-y-1.5"
so vertical spacing between the label, Select (Select, SelectTrigger,
SelectContent, SelectItem) and FormDescription is applied.
In
`@web/apps/dashboard/app/`(app)/[workspaceSlug]/authorization/permissions/components/upsert-permission/index.tsx:
- Around line 203-212: The height utility is targeting inputs but FormTextarea
renders a <textarea>, so update the class on the FormTextarea (the className
that currently contains "[&_input:first-of-type]:h-9") to target the textarea
element instead (e.g. use a selector that matches textarea such as
"[&_textarea:first-of-type]:h-9" or an equivalent selector that correctly
selects the rendered <textarea>) so the height rule applies.
In
`@web/apps/dashboard/app/`(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/simulate/tree-generate.tsx:
- Around line 184-221: The onChange handlers for the two select elements are
using type assertions (e.target.value as "vertical" | "horizontal") which allows
invalid DOM strings into state; replace these assertions with an input-bound
parser/validator that checks e.target.value and only returns "horizontal" or
"vertical" (or a safe default) before calling setCustomConfig; implement a small
type-guard/parse function (e.g., parseDirection) and use it in the onChange for
the regionDirection and instanceDirection updates, leaving
generateMutation.disabled logic unchanged.
In
`@web/apps/dashboard/app/`(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/namespace-delete-dialog.tsx:
- Around line 83-89: The form currently only disables the footer button but
doesn't enforce the confirmation on submit; update the submit handler (the
function passed as onSubmit to handleSubmit, i.e., onSubmit) to verify that the
registered field value (registered via register("name")) exactly equals
namespace.name before proceeding with deletion; if it does not match, abort the
deletion flow and surface an error via the form API (e.g., setError) or return
early so pressing Enter cannot bypass confirmation in the
"delete-namespace-form".
---
Nitpick comments:
In `@web/apps/dashboard/components/ui/sheet.tsx`:
- Around line 97-102: SheetFooter currently uses "flex flex-col-reverse
sm:flex-row sm:justify-end sm:gap-2" so the gap only applies at sm and above;
add a base gap (e.g. "gap-2") to apply spacing in the mobile flex-col-reverse
layout. Update the className string in the SheetFooter component (the JSX div
using cn) to include the base gap alongside the existing sm:gap-2 so mobile and
larger screens both get consistent spacing.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 29445580-112d-4c0b-b96d-062c95b43a21
📒 Files selected for processing (60)
web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/credits-setup.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/expiration-setup.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/components/general-setup.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-key-name.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-permission/create-permission-options.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-permission/permissions-field.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-role/create-key-options.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/assign-role/role-field.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/components/granted-access.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-rbac/index.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/skeletons.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/status-cell/index.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-api.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/settings/components/delete-protection.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/apis/_components/api-list-client.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/authorization/permissions/components/upsert-permission/index.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-key/create-key-options.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-key/key-field.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-permission/create-permission-options.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/components/assign-permission/permissions-field.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/upsert-role/index.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/dialogs/general-setup.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/table/last-used.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/canvas/canvas-boundary.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/simulate/tree-generate.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/promotion-dialog.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/rollback-dialog.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/components/deployment-section.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/components/domains-section.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/promotion-dialog.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/redeploy-dialog.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/rollback-dialog.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/domain_list.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/details/project-details-expandables/project-details-content.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/logs/components/table/runtime-log-details/index.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/components/client.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/components/empty.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/openapi-diff/page.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/settings/components/advanced-settings/custom-domains/custom-domain-row.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/region-badges.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/projects/new/steps/deployment-live.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/delete-dialog.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_components/namespace-delete-dialog.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/overrides/last-used-cell.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/settings/billing/components/current-plan-card.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/settings/billing/components/plan-selection-modal.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/settings/team/invite-form.tsxweb/apps/dashboard/app/(app)/[workspaceSlug]/settings/team/invite.tsxweb/apps/dashboard/app/auth/sign-up/[[...sign-up]]/page.tsxweb/apps/dashboard/app/new/components/onboarding-fallback.tsxweb/apps/dashboard/app/new/hooks/use-workspace-step.tsxweb/apps/dashboard/components/auth/turnstile-challenge.tsxweb/apps/dashboard/components/dashboard/feedback-component.tsxweb/apps/dashboard/components/dashboard/metadata/metadata-setup.tsxweb/apps/dashboard/components/dashboard/ratelimits/ratelimit-setup.tsxweb/apps/dashboard/components/logs/filter-operator-input/index.tsxweb/apps/dashboard/components/selected-item-list.tsxweb/apps/dashboard/components/ui/sheet.tsx
web/apps/dashboard/app/(app)/[workspaceSlug]/apis/_components/api-list-client.tsx
Outdated
Show resolved
Hide resolved
...s/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx
Show resolved
Hide resolved
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/new/steps/deployment-live.tsx
Outdated
Show resolved
Hide resolved
…-vertical-spacing-off-in-modal-after-tailwind-migration
…-vertical-spacing-off-in-modal-after-tailwind-migration
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx (1)
71-76: LGTM - spacing changes are consistent with PR objective.The
PermissionsSectioncorrectly adopts the sameflex flex-col gap-*pattern. Header padding is consistent (px-3.5) between empty and populated states here.Minor optional note: Content area padding differs between empty (
px-4at Line 76) and populated (px-3.5at Line 106) states, mirroring the same pattern inRolesSection. This creates a subtle 2px horizontal shift, but is likely imperceptible in practice.,
♻️ Optional: Align content padding for consistency
If desired, unify content padding across both empty and populated states:
- <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-4 py-2"> + <div className="border-gray-4 border-t rounded-[10px] bg-white dark:bg-black px-3.5 py-2">Apply similarly at Lines 18 and 76 to match their populated counterparts.
Also applies to: 85-106
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/apps/dashboard/app/`(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx around lines 71 - 76, The content area in the PermissionsSection uses px-4 for the empty state container while populated state uses px-3.5, causing a minor 2px horizontal shift; update the container padding to match the populated state by changing the class on the empty-state content div (the div wrapping the permissions content inside PermissionsSection in roles-permissions.tsx) from px-4 to px-3.5 so both empty and populated states use the same horizontal padding.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@web/apps/dashboard/app/`(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx:
- Around line 71-76: The content area in the PermissionsSection uses px-4 for
the empty state container while populated state uses px-3.5, causing a minor 2px
horizontal shift; update the container padding to match the populated state by
changing the class on the empty-state content div (the div wrapping the
permissions content inside PermissionsSection in roles-permissions.tsx) from
px-4 to px-3.5 so both empty and populated states use the same horizontal
padding.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 913f6b51-2135-4084-af37-e7028c7ebd2d
📒 Files selected for processing (1)
web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx
…-tailwind-migration
…-vertical-spacing-off-in-modal-after-tailwind-migration
perkinsjr
approved these changes
Mar 10, 2026
MichaelUnkey
deleted the
eng-2550-vertical-spacing-off-in-modal-after-tailwind-migration
branch
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
What does this PR do?
Background
The space-* utilities in Tailwind apply margins to child elements via a sibling combinator (> * + ), which can behave unexpectedly with certain flex/grid layouts —
particularly inside modals. Switching to gap- provides more predictable and consistent spacing behavior that works correctly regardless of child element visibility
or DOM order.
Fixes # (issue)
ENG-2550
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtmake fmton/godirectoryconsole.logsgit pull origin mainAppreciated