From da145e716760bf6c7afd0e2898d0690c09a9fbf9 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Tue, 10 Mar 2026 18:09:41 -0300 Subject: [PATCH 1/5] Remove min-height for success screen --- .../src/components/CreateOrganization/CreateOrganizationForm.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx index df71448620f..793092b1ac1 100644 --- a/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx +++ b/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx @@ -244,7 +244,6 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani } - sx={t => ({ minHeight: t.sizes.$60 })} onFinish={completeFlow} /> From 138a299759de0499e52590f35b14fac9573705c3 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Tue, 10 Mar 2026 18:18:10 -0300 Subject: [PATCH 2/5] Remove additional padding due to dev mode --- .../components/CreateOrganization/CreateOrganizationPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/ui/src/components/CreateOrganization/CreateOrganizationPage.tsx index a27e66ba87f..cb587a1c51e 100644 --- a/packages/ui/src/components/CreateOrganization/CreateOrganizationPage.tsx +++ b/packages/ui/src/components/CreateOrganization/CreateOrganizationPage.tsx @@ -19,7 +19,7 @@ export const CreateOrganizationPage = withCardStateProvider(() => { ({ width: t.sizes.$108 })}> ({ - padding: `${t.space.$4} ${t.space.$5} ${showDevModeNotice ? t.space.$12 : t.space.$6}`, + padding: `${t.space.$4} ${t.space.$5}`, })} > {card.error} From 806b5ad0425ed612412363015ec739c7cfef9a40 Mon Sep 17 00:00:00 2001 From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com> Date: Tue, 10 Mar 2026 18:21:15 -0300 Subject: [PATCH 3/5] Remove min-height from invite form --- .../components/CreateOrganization/CreateOrganizationForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx index 793092b1ac1..8cc715f8b9a 100644 --- a/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx +++ b/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx @@ -224,7 +224,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani headerTitle={localizationKeys('organizationProfile.invitePage.title')} headerTitleTextVariant={headerTitleTextVariant} headerSubtitleTextVariant={headerSubtitleTextVariant} - sx={t => ({ minHeight: t.sizes.$60, textAlign: 'start' })} + sx={() => ({ textAlign: 'start' })} > {organization && ( Date: Tue, 10 Mar 2026 18:27:37 -0300 Subject: [PATCH 4/5] Adjust padding top for org list page --- .../components/CreateOrganization/CreateOrganizationPage.tsx | 2 -- .../ui/src/components/OrganizationList/OrganizationListPage.tsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/ui/src/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/ui/src/components/CreateOrganization/CreateOrganizationPage.tsx index cb587a1c51e..919537b9b37 100644 --- a/packages/ui/src/components/CreateOrganization/CreateOrganizationPage.tsx +++ b/packages/ui/src/components/CreateOrganization/CreateOrganizationPage.tsx @@ -5,7 +5,6 @@ import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; import { useCreateOrganizationContext } from '../../contexts'; import { localizationKeys } from '../../customizables'; -import { useDevMode } from '../../hooks/useDevMode'; import { CreateOrganizationForm } from './CreateOrganizationForm'; export const CreateOrganizationPage = withCardStateProvider(() => { @@ -13,7 +12,6 @@ export const CreateOrganizationPage = withCardStateProvider(() => { const { mode, navigateAfterCreateOrganization, skipInvitationScreen } = useCreateOrganizationContext(); const card = useCardState(); - const { showDevModeNotice } = useDevMode(); return ( ({ width: t.sizes.$108 })}> diff --git a/packages/ui/src/components/OrganizationList/OrganizationListPage.tsx b/packages/ui/src/components/OrganizationList/OrganizationListPage.tsx index 1b745d75545..0cf798a309b 100644 --- a/packages/ui/src/components/OrganizationList/OrganizationListPage.tsx +++ b/packages/ui/src/components/OrganizationList/OrganizationListPage.tsx @@ -49,7 +49,7 @@ export const OrganizationListPage = withCardStateProvider(() => { return ( - ({ padding: `${t.space.$8} ${t.space.$none} ${t.space.$none}` })}> + ({ padding: `${t.space.$4} ${t.space.$none} ${t.space.$none}` })}> {isLoading && ( Date: Tue, 10 Mar 2026 18:35:12 -0300 Subject: [PATCH 5/5] Add changeset --- .changeset/kind-peaches-notice.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/kind-peaches-notice.md diff --git a/.changeset/kind-peaches-notice.md b/.changeset/kind-peaches-notice.md new file mode 100644 index 00000000000..b86ae7f0435 --- /dev/null +++ b/.changeset/kind-peaches-notice.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Improve spacing for `CreateOrganization` and `OrganizationList`