From d9dc3cc409aae06bf800e42c5e4568becfb41755 Mon Sep 17 00:00:00 2001 From: Laura Beatris Date: Wed, 20 May 2026 10:37:28 -0300 Subject: [PATCH 1/3] Add `ProfileContentPage` --- .../src/common/CustomPageContentContainer.tsx | 23 +- .../OrganizationAPIKeysPage.tsx | 31 +- .../OrganizationBillingPage.tsx | 107 ++++--- .../OrganizationGeneralPage.tsx | 43 +-- .../OrganizationMembers.tsx | 301 +++++++++--------- .../OrganizationPlansPage.tsx | 5 +- .../PaymentAttempts/PaymentAttemptPage.tsx | 21 +- .../components/Statements/StatementPage.tsx | 21 +- .../components/UserProfile/APIKeysPage.tsx | 37 ++- .../components/UserProfile/AccountPage.tsx | 71 +++-- .../components/UserProfile/BillingPage.tsx | 99 +++--- .../src/components/UserProfile/PlansPage.tsx | 5 +- .../components/UserProfile/SecurityPage.tsx | 43 +-- .../ProfileCard/ProfileCardContent.tsx | 10 +- .../elements/ProfileCard/ProfileCardPage.tsx | 39 +++ packages/ui/src/elements/ProfileCard/index.ts | 2 + 16 files changed, 467 insertions(+), 391 deletions(-) create mode 100644 packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx diff --git a/packages/ui/src/common/CustomPageContentContainer.tsx b/packages/ui/src/common/CustomPageContentContainer.tsx index 1ce10899348..02502ffa0a4 100644 --- a/packages/ui/src/common/CustomPageContentContainer.tsx +++ b/packages/ui/src/common/CustomPageContentContainer.tsx @@ -1,22 +1,25 @@ import { Col, descriptors } from '../customizables'; +import { ProfileCard } from '../elements/ProfileCard'; import type { CustomPageContent } from '../utils/createCustomPages'; import { ExternalElementMounter } from '../utils/ExternalElementMounter'; export const CustomPageContentContainer = ({ mount, unmount }: Omit) => { return ( - + - + + + - + ); }; diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx index aa661a2e38d..80b9c4fe3ef 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx @@ -4,6 +4,7 @@ import { APIKeysContext, useOrganizationProfileContext } from '@/ui/contexts'; import { Col, localizationKeys } from '@/ui/customizables'; import { Header } from '@/ui/elements/Header'; import { useUnsafeNavbarContext } from '@/ui/elements/Navbar'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { APIKeysPage } from '../APIKeys/APIKeys'; @@ -18,19 +19,21 @@ export const OrganizationAPIKeysPage = () => { } return ( - - - - - - - - + + + + + + + + + + ); }; diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationBillingPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationBillingPage.tsx index 7105e66eabb..fe8018cd709 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationBillingPage.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationBillingPage.tsx @@ -1,6 +1,7 @@ import { Card } from '@/ui/elements/Card'; import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; import { Header } from '@/ui/elements/Header'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs'; import { Protect } from '../../common'; @@ -24,63 +25,67 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => { const { selectedTab, handleTabChange } = useTabState(orgTabMap); return ( - ({ gap: t.space.$8, color: t.colors.$colorForeground })} - > + ({ gap: t.space.$8, color: t.colors.$colorForeground })} > - - - - - {card.error} - - - ({ gap: t.space.$6 })}> - + - - - - - - + + {card.error} + + + ({ gap: t.space.$6 })}> + + - has({ permission: 'org:sys_billing:manage' })}> - - - - - - - - - - - + + + + + + has({ permission: 'org:sys_billing:manage' })}> + + + + + + + + + + + + - + ); }); diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx index a062f131014..c19a2fef388 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx @@ -2,6 +2,7 @@ import { useOrganization } from '@clerk/shared/react'; import { Header } from '@/ui/elements/Header'; import { OrganizationPreview } from '@/ui/elements/OrganizationPreview'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { ProfileSection } from '@/ui/elements/Section'; import { Protect, useProtect } from '../../common'; @@ -56,29 +57,31 @@ const DeleteOrganizationScreen = () => { export const OrganizationGeneralPage = () => { return ( - ({ gap: t.space.$8 })} - > + ({ gap: t.space.$8 })} > - - ({ marginBottom: t.space.$4 })} - textVariant='h2' - /> - - - - - - - + + + ({ marginBottom: t.space.$4 })} + textVariant='h2' + /> + + + + + + + + - + ); }; diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx index ff408acc6ea..0b103b559e0 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationMembers.tsx @@ -8,6 +8,7 @@ import { Animated } from '@/ui/elements/Animated'; import { Card } from '@/ui/elements/Card'; import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; import { Header } from '@/ui/elements/Header'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs'; import { NotificationCountBadge, useProtect } from '../../common'; @@ -50,171 +51,175 @@ export const OrganizationMembers = withCardStateProvider(() => { } return ( - + ({ paddingBottom: theme.space.$13 })} + elementDescriptor={descriptors.page} + gap={2} > - - - - - - - {card.error} - - ({ gap: t.space.$2 })}> - {canReadMemberships && ( - - {!!memberships?.count && ( - - )} - - )} - {canManageMemberships && ( - - {invitations?.data && !invitations.isLoading && ( - - )} - - )} - {canManageMemberships && isDomainsEnabled && ( - - {membershipRequests?.data && !membershipRequests.isLoading && ( - - )} - - )} - - - {canReadMemberships && ( - - ({ paddingBottom: theme.space.$13 })} + > + + + + + + + {card.error} + + ({ gap: t.space.$2 })}> + {canReadMemberships && ( + + {!!memberships?.count && ( + + )} + + )} + {canManageMemberships && ( + + {invitations?.data && !invitations.isLoading && ( + + )} + + )} + {canManageMemberships && isDomainsEnabled && ( + + {membershipRequests?.data && !membershipRequests.isLoading && ( + + )} + + )} + + + {canReadMemberships && ( + - setSearch(query)} - onQueryTrigger={query => setQuery(query)} + + setSearch(query)} + onQueryTrigger={query => setQuery(query)} + /> + } + /> + {hasRoleSetMigration && ( + - } - /> - {hasRoleSetMigration && ( - - )} - + - - - )} - {canManageMemberships && ( - - - - )} - {canManageMemberships && isDomainsEnabled && ( - - - - )} - - - - + + )} + {canManageMemberships && ( + + + + )} + {canManageMemberships && isDomainsEnabled && ( + + + + )} + + + + - {canReadMemberships && !!memberships?.count && organization && organization.maxAllowedMemberships > 0 ? ( - ({ - position: 'absolute', - bottom: 0, - left: 0, - right: 0, - backgroundColor: theme.colors.$colorBackground, - borderTop: `1px solid ${theme.colors.$borderAlpha100}`, - paddingInline: theme.space.$4, - height: theme.space.$13, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - })} - > - ({ - display: 'inline-flex', + {canReadMemberships && !!memberships?.count && organization && organization.maxAllowedMemberships > 0 ? ( + ({ + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + backgroundColor: theme.colors.$colorBackground, + borderTop: `1px solid ${theme.colors.$borderAlpha100}`, + paddingInline: theme.space.$4, + height: theme.space.$13, + display: 'flex', alignItems: 'center', - gap: t.space.$2, + justifyContent: 'center', })} > - ({ + display: 'inline-flex', + alignItems: 'center', + gap: t.space.$2, })} - /> - - - ) : null} - + > + + + + + ) : null} + + ); }); diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationPlansPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationPlansPage.tsx index a4a55226faa..4b4092f5a36 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationPlansPage.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationPlansPage.tsx @@ -1,5 +1,6 @@ import { Alert } from '@/ui/elements/Alert'; import { Header } from '@/ui/elements/Header'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { Protect } from '../../common'; import { PricingTableContext, SubscriberTypeContext } from '../../contexts'; @@ -12,7 +13,7 @@ const OrganizationPlansPageInternal = () => { const { navigate } = useRouter(); return ( - <> + ({ borderBottomWidth: t.borderWidths.$normal, @@ -47,7 +48,7 @@ const OrganizationPlansPageInternal = () => { - + ); }; diff --git a/packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx index 74220d9bd88..90ebfb88ec5 100644 --- a/packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx +++ b/packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx @@ -4,6 +4,7 @@ import type { BillingSubscriptionItemResource } from '@clerk/shared/types'; import { Alert } from '@/ui/elements/Alert'; import { Header } from '@/ui/elements/Header'; import { LineItems } from '@/ui/elements/LineItems'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { formatDate } from '@/ui/utils/formatDate'; import { truncateWithEndVisible } from '@/ui/utils/truncateTextWithEndVisible'; @@ -46,18 +47,20 @@ export const PaymentAttemptPage = () => { if (isLoading) { return ( - - - + + + + + ); } return ( - <> + ({ borderBlockEndWidth: t.borderWidths.$normal, @@ -194,7 +197,7 @@ export const PaymentAttemptPage = () => { )} - + ); }; diff --git a/packages/ui/src/components/Statements/StatementPage.tsx b/packages/ui/src/components/Statements/StatementPage.tsx index d9ddb8fc602..ddc384bfe43 100644 --- a/packages/ui/src/components/Statements/StatementPage.tsx +++ b/packages/ui/src/components/Statements/StatementPage.tsx @@ -2,6 +2,7 @@ import { __internal_useStatementQuery } from '@clerk/shared/react/index'; import { Alert } from '@/ui/elements/Alert'; import { Header } from '@/ui/elements/Header'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { formatDate } from '@/ui/utils/formatDate'; import { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts/components'; @@ -38,18 +39,20 @@ export const StatementPage = () => { if (isLoading) { return ( - - - + + + + + ); } return ( - <> + ({ borderBlockEndWidth: t.borderWidths.$normal, @@ -170,6 +173,6 @@ export const StatementPage = () => { /> )} - + ); }; diff --git a/packages/ui/src/components/UserProfile/APIKeysPage.tsx b/packages/ui/src/components/UserProfile/APIKeysPage.tsx index 98d64d2bcb0..372153efd56 100644 --- a/packages/ui/src/components/UserProfile/APIKeysPage.tsx +++ b/packages/ui/src/components/UserProfile/APIKeysPage.tsx @@ -4,6 +4,7 @@ import { APIKeysContext, useUserProfileContext } from '@/ui/contexts'; import { Col, descriptors, localizationKeys } from '@/ui/customizables'; import { Header } from '@/ui/elements/Header'; import { useUnsafeNavbarContext } from '@/ui/elements/Navbar'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { APIKeysPage as APIKeysPageInternal } from '../APIKeys/APIKeys'; @@ -18,22 +19,24 @@ export const APIKeysPage = () => { } return ( - - - - - - - - + + + + + + + + + + ); }; diff --git a/packages/ui/src/components/UserProfile/AccountPage.tsx b/packages/ui/src/components/UserProfile/AccountPage.tsx index 01efd16cf33..57b34c87cd9 100644 --- a/packages/ui/src/components/UserProfile/AccountPage.tsx +++ b/packages/ui/src/components/UserProfile/AccountPage.tsx @@ -3,6 +3,7 @@ import { useUser } from '@clerk/shared/react'; import { Card } from '@/ui/elements/Card'; import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; import { Header } from '@/ui/elements/Header'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { useEnvironment, useUserProfileContext } from '../../contexts'; import { Col, descriptors, localizationKeys } from '../../customizables'; @@ -32,44 +33,48 @@ export const AccountPage = withCardStateProvider(() => { const isUsernameImmutable = immutableAttributes.has('username'); return ( - ({ gap: t.space.$8, color: t.colors.$colorForeground })} - > + ({ gap: t.space.$8, color: t.colors.$colorForeground })} > - - ({ marginBottom: t.space.$4 })} - textVariant='h2' - /> - + + + ({ marginBottom: t.space.$4 })} + textVariant='h2' + /> + - {card.error} + {card.error} - - {showUsername && } - {showEmail && ( - - )} - {showPhone && ( - - )} - {showConnectedAccounts && } + + {showUsername && } + {showEmail && ( + + )} + {showPhone && ( + + )} + {showConnectedAccounts && ( + + )} - {/*TODO-STEP-UP: Verify that these work as expected*/} - {showEnterpriseAccounts && } - {showWeb3 && } + {/*TODO-STEP-UP: Verify that these work as expected*/} + {showEnterpriseAccounts && } + {showWeb3 && } + - + ); }); diff --git a/packages/ui/src/components/UserProfile/BillingPage.tsx b/packages/ui/src/components/UserProfile/BillingPage.tsx index 8568e3a9a18..51976e905de 100644 --- a/packages/ui/src/components/UserProfile/BillingPage.tsx +++ b/packages/ui/src/components/UserProfile/BillingPage.tsx @@ -1,6 +1,7 @@ import { Card } from '@/ui/elements/Card'; import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; import { Header } from '@/ui/elements/Header'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs'; import { SubscriberTypeContext } from '../../contexts'; @@ -22,59 +23,61 @@ const BillingPageInternal = withCardStateProvider(() => { const { selectedTab, handleTabChange } = useTabState(tabMap); return ( - ({ gap: t.space.$8, color: t.colors.$colorForeground })} - > + ({ gap: t.space.$8, color: t.colors.$colorForeground })} > - - - + + + + - {card.error} + {card.error} - - ({ gap: t.space.$6 })}> - - - - - - ({ width: '100%', flexDirection: 'column' })}> - - - - - - - - - - - + + ({ gap: t.space.$6 })}> + + + + + + ({ width: '100%', flexDirection: 'column' })}> + + + + + + + + + + + + - + ); }); diff --git a/packages/ui/src/components/UserProfile/PlansPage.tsx b/packages/ui/src/components/UserProfile/PlansPage.tsx index 63749bf2676..2ae55fc2b19 100644 --- a/packages/ui/src/components/UserProfile/PlansPage.tsx +++ b/packages/ui/src/components/UserProfile/PlansPage.tsx @@ -1,4 +1,5 @@ import { Header } from '@/ui/elements/Header'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { PricingTableContext, SubscriberTypeContext } from '../../contexts'; import { localizationKeys } from '../../localization'; @@ -9,7 +10,7 @@ const PlansPageInternal = () => { const { navigate } = useRouter(); return ( - <> + ({ borderBottomWidth: t.borderWidths.$normal, @@ -32,7 +33,7 @@ const PlansPageInternal = () => { - + ); }; diff --git a/packages/ui/src/components/UserProfile/SecurityPage.tsx b/packages/ui/src/components/UserProfile/SecurityPage.tsx index 172cfac0e10..e79440cc411 100644 --- a/packages/ui/src/components/UserProfile/SecurityPage.tsx +++ b/packages/ui/src/components/UserProfile/SecurityPage.tsx @@ -3,6 +3,7 @@ import { useUser } from '@clerk/shared/react'; import { Card } from '@/ui/elements/Card'; import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; import { Header } from '@/ui/elements/Header'; +import { ProfileCard } from '@/ui/elements/ProfileCard'; import { getSecondFactors } from '@/ui/utils/mfa'; import { useEnvironment, useUserProfileContext } from '../../contexts'; @@ -24,28 +25,30 @@ export const SecurityPage = withCardStateProvider(() => { const showDelete = user?.deleteSelfEnabled; return ( - ({ gap: t.space.$8 })} - > + ({ gap: t.space.$8 })} > - - ({ marginBottom: t.space.$4 })} - textVariant='h2' - /> - - {card.error} - {showPassword && } - {showPasskey && } - {showMfa && } - - {showDelete && } + + + ({ marginBottom: t.space.$4 })} + textVariant='h2' + /> + + {card.error} + {showPassword && } + {showPasskey && } + {showMfa && } + + {showDelete && } + - + ); }); diff --git a/packages/ui/src/elements/ProfileCard/ProfileCardContent.tsx b/packages/ui/src/elements/ProfileCard/ProfileCardContent.tsx index f9b075c43f0..79d2416a7ef 100644 --- a/packages/ui/src/elements/ProfileCard/ProfileCardContent.tsx +++ b/packages/ui/src/elements/ProfileCard/ProfileCardContent.tsx @@ -2,12 +2,13 @@ import React from 'react'; import { Col, descriptors } from '../../customizables'; import { useRouter } from '../../router'; -import { common, mqu } from '../../styledSystem'; +import { common } from '../../styledSystem'; type ProfileCardContentProps = React.PropsWithChildren<{ contentRef?: React.RefObject; scrollBoxId?: string; }>; + export const ProfileCardContent = (props: ProfileCardContentProps) => { const { contentRef, children, scrollBoxId } = props; const router = useRouter(); @@ -53,13 +54,6 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => { sx={theme => ({ flex: `1`, scrollbarGutter: 'stable', - paddingTop: theme.space.$7, - paddingBottom: theme.space.$7, - paddingInlineStart: theme.space.$8, - paddingInlineEnd: theme.space.$6, //smaller because of stable scrollbar gutter - [mqu.sm]: { - padding: `${theme.space.$8} ${theme.space.$5}`, - }, ...common.maxHeightScroller(theme), })} ref={contentRef} diff --git a/packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx b/packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx new file mode 100644 index 00000000000..675a6c78868 --- /dev/null +++ b/packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx @@ -0,0 +1,39 @@ +import type { PropsWithChildren } from 'react'; + +import { Col } from '../../customizables'; +import { mqu } from '../../styledSystem'; + +type ProfileCardPageProps = PropsWithChildren<{ + /** + * Use this for pages that manage their own layout/padding + */ + noPadding?: boolean; +}>; + +/** + * Per-page padding wrapper rendered inside `ProfileCardContent` + * + * Each routed page inside `UserProfile` / `OrganizationProfile` should wrap its content + * in this component + */ +export const ProfileCardPage = ({ children, noPadding }: ProfileCardPageProps) => { + if (noPadding) { + return <>{children}; + } + + return ( + ({ + paddingTop: theme.space.$7, + paddingBottom: theme.space.$7, + paddingInlineStart: theme.space.$8, + paddingInlineEnd: theme.space.$6, //smaller because of stable scrollbar gutter on the parent + [mqu.sm]: { + padding: `${theme.space.$8} ${theme.space.$5}`, + }, + })} + > + {children} + + ); +}; diff --git a/packages/ui/src/elements/ProfileCard/index.ts b/packages/ui/src/elements/ProfileCard/index.ts index 4f2ec4d5d78..84df2ddd56e 100644 --- a/packages/ui/src/elements/ProfileCard/index.ts +++ b/packages/ui/src/elements/ProfileCard/index.ts @@ -1,7 +1,9 @@ import { ProfileCardContent } from './ProfileCardContent'; +import { ProfileCardPage } from './ProfileCardPage'; import { ProfileCardRoot } from './ProfileCardRoot'; export const ProfileCard = { Root: ProfileCardRoot, Content: ProfileCardContent, + Page: ProfileCardPage, }; From 02e7a8bf119d7d3195123c094e94fa9b915de165 Mon Sep 17 00:00:00 2001 From: Laura Beatris Date: Wed, 20 May 2026 11:48:15 -0300 Subject: [PATCH 2/3] Add changeset --- .changeset/chatty-maps-shine.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chatty-maps-shine.md diff --git a/.changeset/chatty-maps-shine.md b/.changeset/chatty-maps-shine.md new file mode 100644 index 00000000000..525c27af29d --- /dev/null +++ b/.changeset/chatty-maps-shine.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Add `ProfileCard.Page` for `UserProfile` and `OrganizationProfile` pages From 0899b584d28fe170fed9d9b441eae35a1505ce1b Mon Sep 17 00:00:00 2001 From: Laura Beatris Date: Wed, 20 May 2026 11:53:16 -0300 Subject: [PATCH 3/3] Introduce `bleeding` and `padding` prop --- .../elements/ProfileCard/ProfileCardPage.tsx | 38 +++++++++++++------ 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx b/packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx index 675a6c78868..ecc0d016a49 100644 --- a/packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx +++ b/packages/ui/src/elements/ProfileCard/ProfileCardPage.tsx @@ -5,9 +5,16 @@ import { mqu } from '../../styledSystem'; type ProfileCardPageProps = PropsWithChildren<{ /** - * Use this for pages that manage their own layout/padding + * Whether to apply the standard per-page padding. + * @default true */ - noPadding?: boolean; + padding?: boolean; + /** + * Whether the page should bleed past the standard padding by applying matching + * negative inline margins, so children render flush with the scroll-gutter / card border. + * @default false + */ + bleeding?: boolean; }>; /** @@ -16,21 +23,30 @@ type ProfileCardPageProps = PropsWithChildren<{ * Each routed page inside `UserProfile` / `OrganizationProfile` should wrap its content * in this component */ -export const ProfileCardPage = ({ children, noPadding }: ProfileCardPageProps) => { - if (noPadding) { +export const ProfileCardPage = ({ children, padding = true, bleeding = false }: ProfileCardPageProps) => { + if (!padding && !bleeding) { return <>{children}; } return ( ({ - paddingTop: theme.space.$7, - paddingBottom: theme.space.$7, - paddingInlineStart: theme.space.$8, - paddingInlineEnd: theme.space.$6, //smaller because of stable scrollbar gutter on the parent - [mqu.sm]: { - padding: `${theme.space.$8} ${theme.space.$5}`, - }, + ...(padding && { + paddingTop: theme.space.$7, + paddingBottom: theme.space.$7, + paddingInlineStart: theme.space.$8, + paddingInlineEnd: theme.space.$6, //smaller because of stable scrollbar gutter on the parent + [mqu.sm]: { + padding: `${theme.space.$8} ${theme.space.$5}`, + }, + }), + ...(bleeding && { + marginInlineStart: `calc(${theme.space.$8} * -1)`, + marginInlineEnd: `calc(${theme.space.$6} * -1)`, + [mqu.sm]: { + marginInline: `calc(${theme.space.$5} * -1)`, + }, + }), })} > {children}