fix(clerk-js): UI fixes for mobile devices in UP/OP

.changeset/nervous-wombats-sin.md

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

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

@@ -86,7 +86,13 @@ const OrganizationProfileSection = () => {
     return null;
   }
 
-  const profile = <OrganizationPreview organization={organization} />;
+  const profile = (
+    <OrganizationPreview
+      size='lg'
+      mainIdentifierVariant='subtitle'
+      organization={organization}
+    />
+  );
 
   return (
     <ProfileSection.Root
@@ -139,9 +145,6 @@ const OrganizationDomainsSection = () => {
       title={localizationKeys('organizationProfile.profilePage.domainSection.title')}
       id='organizationDomains'
       centered={false}
-      sx={{
-        gap: 0,
-      }}
     >
       <Action.Root>
         <DomainList />
@@ -156,9 +159,10 @@ const OrganizationDomainsSection = () => {
               <Text
                 localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
                 sx={t => ({
-                  paddingLeft: t.space.$5x5,
-                  color: t.colors.$colorTextSecondary,
+                  paddingLeft: t.space.$9,
+                  marginTop: `-${t.space.$1}`,
                 })}
+                colorScheme='tertiary'
               />
             </Col>
           </Action.Trigger>
@@ -188,12 +192,20 @@ const OrganizationLeaveSection = () => {
     >
       <Action.Root>
         <Action.Closed value='leave'>
-          <ProfileSection.Item id='organizationDanger'>
+          <ProfileSection.Item
+            sx={t => ({
+              paddingTop: 0,
+              paddingBottom: 0,
+              paddingLeft: t.space.$1,
+            })}
+            id='organizationDanger'
+          >
             <Action.Trigger value='leave'>
               <ProfileSection.Button
                 id='organizationDanger'
                 variant='ghost'
                 colorScheme='danger'
+                textVariant='buttonLarge'
                 localizationKey={localizationKeys(
                   'organizationProfile.profilePage.dangerSection.leaveOrganization.title',
                 )}
@@ -234,12 +246,20 @@ const OrganizationDeleteSection = () => {
     >
       <Action.Root>
         <Action.Closed value='delete'>
-          <ProfileSection.Item id={'organizationDanger'}>
+          <ProfileSection.Item
+            sx={t => ({
+              paddingTop: 0,
+              paddingBottom: 0,
+              paddingLeft: t.space.$1,
+            })}
+            id={'organizationDanger'}
+          >
             <Action.Trigger value='delete'>
               <ProfileSection.Button
                 id='organizationDanger'
                 variant='ghost'
                 colorScheme='danger'
+                textVariant='buttonLarge'
                 localizationKey={localizationKeys(
                   'organizationProfile.profilePage.dangerSection.deleteOrganization.title',
                 )}

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

@@ -65,7 +65,15 @@ export const OrganizationMembers = withCardStateProvider(() => {
       >
         <Action.Root animate={false}>
           <Animated asChild>
-            <Header.Root sx={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between' }}>
+            <Header.Root
+              contentSx={{
+                [mqu.md]: {
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                },
+              }}
+            >
               <Header.Title
                 localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}
                 textVariant='h2'

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

@@ -56,7 +56,6 @@ const DeviceItem = ({ session }: { session: SessionWithActivitiesResource }) =>
       sx={t => ({
         alignItems: 'flex-start',
         padding: `${t.space.$2} ${t.space.$4}`,
-        marginLeft: `-${t.space.$4}`,
         borderRadius: t.radii.$md,
         ':hover': { backgroundColor: t.colors.$blackAlpha50 },
       })}

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

@@ -1,16 +1,17 @@
 import React from 'react';
 
 import { Col, descriptors, Heading, Text, useAppearance } from '../customizables';
-import type { PropsOfComponent } from '../styledSystem';
+import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
 import { ApplicationLogo } from './ApplicationLogo';
 
 export type HeaderProps = PropsOfComponent<typeof Col> & {
   showLogo?: boolean;
+  contentSx?: ThemableCssProp;
 };
 
 const Root = React.memo(
   React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
-    const { sx, children, showLogo = false, ...rest } = props;
+    const { sx, children, contentSx, gap = 6, showLogo = false, ...rest } = props;
     const appearance = useAppearance();
 
     const logoIsVisible = appearance.parsedLayout.logoPlacement === 'inside' && showLogo;
@@ -19,12 +20,18 @@ const Root = React.memo(
       <Col
         ref={ref}
         elementDescriptor={descriptors.header}
-        gap={6}
+        gap={gap}
         sx={sx}
         {...rest}
       >
         {logoIsVisible && <ApplicationLogo />}
-        <Col gap={1}>{children}</Col>
+        <Col
+          gap={1}
+          sx={contentSx}
+          {...rest}
+        >
+          {children}
+        </Col>
       </Col>
     );
   }),

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

@@ -21,7 +21,10 @@ const ProfileSectionRoot = (props: ProfileSectionProps) => {
   const [height, setHeight] = useState(0);
 
   useLayoutEffect(() => {
-    setHeight(ref.current?.clientHeight || 0);
+    const element = ref.current;
+    if (element) {
+      setHeight(element.clientHeight + element.clientTop || 0);
+    }
   }, []);
 
   return (
@@ -34,7 +37,7 @@ const ProfileSectionRoot = (props: ProfileSectionProps) => {
           borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
           paddingTop: t.space.$4,
           paddingBottom: t.space.$4,
-          gap: t.space.$4,
+          gap: t.space.$6,
           [mqu.lg]: {
             flexDirection: 'column-reverse',
             gap: t.space.$2,
@@ -49,14 +52,13 @@ const ProfileSectionRoot = (props: ProfileSectionProps) => {
         elementId={descriptors.profileSectionContent.setId(id)}
         gap={2}
         ref={ref}
-        sx={t => ({
-          paddingLeft: t.space.$6,
+        sx={{
           minWidth: 0,
           width: '100%',
           '+ *': {
             '--clerk-height': `${height}px`,
           },
-        })}
+        }}
       >
         {children}
       </Col>
@@ -65,7 +67,7 @@ const ProfileSectionRoot = (props: ProfileSectionProps) => {
         elementDescriptor={descriptors.profileSectionHeader}
         elementId={descriptors.profileSectionHeader.setId(id)}
         sx={t => ({
-          padding: centered ? undefined : `${t.space.$2} 0`,
+          padding: centered ? undefined : `${t.space.$1x5} 0`,
           gap: t.space.$1,
           width: t.space.$66,
           alignSelf: height ? 'self-start' : centered ? 'center' : undefined,
@@ -126,8 +128,7 @@ const ProfileSectionItem = (props: ProfileSectionItemProps) => {
           justifyContent: 'space-between',
           width: '100%',
           alignItems: 'center',
-          paddingTop: t.space.$1x5,
-          paddingBottom: t.space.$1x5,
+          padding: `${t.space.$1x5} ${t.space.$none} ${t.space.$1x5} ${t.space.$4}`,
           gap: t.space.$2,
         }),
         sx,
@@ -179,7 +180,6 @@ const ProfileSectionArrowButton = (props: ProfileSectionButtonProps) => {
           textWrap: 'nowrap',
           justifyContent: 'start',
           height: t.sizes.$8,
-          marginLeft: `-${t.space.$3x5}`,
         }),
         sx,
       ]}