Card label alignment

.changeset/five-boxes-agree.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/old-scissors-leave.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx

@@ -99,10 +99,7 @@ const OrganizationProfileSection = () => {
           fallback={profile}
         >
           <Action.Closed value='edit'>
-            <ProfileSection.Item
-              id='organizationProfile'
-              sx={t => ({ maxHeight: t.space.$8 })}
-            >
+            <ProfileSection.Item id='organizationProfile'>
               {profile}
 
               <Action.Trigger value='edit'>
@@ -142,6 +139,7 @@ const OrganizationDomainsSection = () => {
     <ProfileSection.Root
       title={localizationKeys('organizationProfile.profilePage.domainSection.title')}
       id='organizationDomains'
+      centered={false}
       sx={{
         gap: 0,
       }}
@@ -191,10 +189,7 @@ const OrganizationLeaveSection = () => {
     >
       <Action.Root>
         <Action.Closed value='leave'>
-          <ProfileSection.Item
-            id='organizationDanger'
-            sx={t => ({ maxHeight: t.space.$8 })}
-          >
+          <ProfileSection.Item id='organizationDanger'>
             <Action.Trigger value='leave'>
               <Button
                 variant='ghostDanger'
@@ -238,10 +233,7 @@ const OrganizationDeleteSection = () => {
     >
       <Action.Root>
         <Action.Closed value='delete'>
-          <ProfileSection.Item
-            id={'organizationDanger'}
-            sx={t => ({ maxHeight: t.space.$8 })}
-          >
+          <ProfileSection.Item id={'organizationDanger'}>
             <Action.Trigger value='delete'>
               <Button
                 variant='ghostDanger'

packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx

@@ -23,6 +23,7 @@ export const ActiveDevicesSection = () => {
   return (
     <ProfileSection.Root
       title={localizationKeys('userProfile.start.activeDevicesSection.title')}
+      centered={false}
       id='activeDevices'
     >
       <ProfileSection.ItemList id='activeDevices'>

packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx

@@ -44,6 +44,7 @@ export const ConnectedAccountsSection = withCardStateProvider(() => {
   return (
     <ProfileSection.Root
       title={localizationKeys('userProfile.start.connectedAccountsSection.title')}
+      centered={false}
       id='connectedAccounts'
     >
       <Card.Alert>{card.error}</Card.Alert>

packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx

@@ -41,6 +41,7 @@ export const EmailsSection = () => {
   return (
     <ProfileSection.Root
       title={localizationKeys('userProfile.start.emailAddressesSection.title')}
+      centered={false}
       id='emailAddresses'
     >
       <Action.Root>

packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx

@@ -38,6 +38,7 @@ export const MfaSection = () => {
   return (
     <ProfileSection.Root
       title={localizationKeys('userProfile.start.mfaSection.title')}
+      centered={false}
       id='mfa'
     >
       <Action.Root>

packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx

@@ -30,7 +30,7 @@ export const UserProfileSection = () => {
     <ProfileSection.Root
       title={localizationKeys('userProfile.start.profileSection.title')}
       id='profile'
-      sx={{ alignItems: 'center', [mqu.md]: { alignItems: 'flex-start' } }}
+      sx={{ [mqu.md]: { alignItems: 'flex-start' } }}
     >
       <Action.Root>
         <Action.Closed value='edit'>

packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx

@@ -44,6 +44,7 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => {
         elementDescriptor={descriptors.pageScrollBox}
         sx={theme => ({
           flex: `1`,
+          scrollbarGutter: 'stable',
           padding: `${theme.space.$7} ${theme.space.$8}`,
           [mqu.xs]: {
             padding: `${theme.space.$8} ${theme.space.$5}`,

packages/clerk-js/src/ui/elements/Section.tsx

@@ -1,5 +1,5 @@
 import type { ProfileSectionId } from '@clerk/types';
-import { isValidElement } from 'react';
+import { isValidElement, useLayoutEffect, useRef, useState } from 'react';
 
 import type { LocalizationKey } from '../customizables';
 import { Col, descriptors, Flex, Icon, Spinner, Text } from '../customizables';
@@ -11,60 +11,78 @@ import { ArrowBlockButton, Menu, MenuItem, MenuList, MenuTrigger } from '.';
 
 type ProfileSectionProps = Omit<PropsOfComponent<typeof Flex>, 'title'> & {
   title: LocalizationKey;
-  subtitle?: LocalizationKey;
+  centered?: boolean;
   id: ProfileSectionId;
 };
 
 const ProfileSectionRoot = (props: ProfileSectionProps) => {
-  const { title, children, id, subtitle, sx, ...rest } = props;
+  const { title, centered = true, children, id, sx, ...rest } = props;
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [height, setHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    setHeight(ref.current?.clientHeight || 0);
+  }, []);
+
   return (
     <Flex
       elementDescriptor={descriptors.profileSection}
       elementId={descriptors.profileSection.setId(id)}
       sx={[
         t => ({
+          flexDirection: 'row-reverse',
           borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
           padding: `${t.space.$4} 0`,
-          gap: t.space.$6,
+          gap: t.space.$4,
           [mqu.md]: {
-            flexDirection: 'column',
-            gap: 0,
+            flexDirection: 'column-reverse',
+            gap: t.space.$2,
           },
         }),
         sx,
       ]}
       {...rest}
     >
+      <Col
+        elementDescriptor={descriptors.profileSectionContent}
+        elementId={descriptors.profileSectionContent.setId(id)}
+        gap={2}
+        ref={ref}
+        sx={{
+          width: '100%',
+          '+ *': {
+            '--clerk-height': `${height}px`,
+          },
+        }}
+      >
+        {children}
+      </Col>
+
       <Col
         elementDescriptor={descriptors.profileSectionHeader}
         elementId={descriptors.profileSectionHeader.setId(id)}
-        sx={t => ({ gap: t.space.$1, width: t.space.$66 })}
+        sx={t => ({
+          padding: centered ? undefined : `${t.space.$2} 0`,
+          gap: t.space.$1,
+          width: t.space.$66,
+          alignSelf: height ? 'self-start' : centered ? 'center' : undefined,
+          marginTop: centered ? 'calc(var(--clerk-height)/2)' : undefined,
+          transform: height && centered ? 'translateY(-50%)' : undefined,
+          [mqu.md]: {
+            alignSelf: 'self-start',
+            marginTop: 'unset',
+            transform: 'none',
+            padding: 0,
+          },
+        })}
       >
         <SectionHeader
           localizationKey={title}
           elementDescriptor={descriptors.profileSectionTitle}
           elementId={descriptors.profileSectionTitle.setId(id)}
           textElementDescriptor={descriptors.profileSectionTitleText}
           textElementId={descriptors.profileSectionTitleText.setId(id)}
-          sx={t => ({ padding: `${t.space.$2} ${t.space.$none}` })}
         />
-        {subtitle && (
-          <SectionSubHeader
-            localizationKey={subtitle}
-            elementDescriptor={descriptors.profileSectionSubtitle}
-            elementId={descriptors.profileSectionSubtitle.setId(id)}
-            textElementDescriptor={descriptors.profileSectionSubtitleText}
-            textElementId={descriptors.profileSectionSubtitleText.setId(id)}
-          />
-        )}
-      </Col>
-      <Col
-        elementDescriptor={descriptors.profileSectionContent}
-        elementId={descriptors.profileSectionContent.setId(id)}
-        gap={2}
-        sx={{ width: '100%' }}
-      >
-        {children}
       </Col>
     </Flex>
   );