From cc818c71ab4049fb3f0e17a29f12d5b24a64f91b Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 1 Apr 2024 13:10:59 +0300
Subject: [PATCH 1/2] fix(clerk-js): Fix height misalignment of Password
 section in UP

---
 .../UserProfile/ConnectedAccountsSection.tsx          |  2 +-
 .../src/ui/components/UserProfile/PasswordSection.tsx | 11 ++++++-----
 packages/clerk-js/src/ui/elements/Section.tsx         |  4 +---
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
index 7f671bdd8ac..9a3a755ac29 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
@@ -103,7 +103,7 @@ export const ConnectedAccountsSection = withCardStateProvider(() => {
                 {(error || reauthorizationRequired) && (
                   <Text
                     colorScheme='danger'
-                    sx={t => ({ padding: `${t.sizes.$none} ${t.sizes.$4} ${t.sizes.$1x5} ${t.sizes.$10}` })}
+                    sx={t => ({ padding: `${t.sizes.$none} ${t.sizes.$4} ${t.sizes.$1x5} ${t.sizes.$8x5}` })}
                     localizationKey={errorMessage}
                   />
                 )}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx
index f428b910667..7894ff85e79 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PasswordSection.tsx
@@ -4,7 +4,6 @@ import { localizationKeys, Text } from '../../customizables';
 import { ProfileSection } from '../../elements';
 import { Action } from '../../elements/Action';
 import { useActionContext } from '../../elements/Action/ActionRoot';
-import { mqu } from '../../styledSystem';
 import { PasswordForm } from './PasswordForm';
 
 const PasswordScreen = () => {
@@ -28,19 +27,21 @@ export const PasswordSection = () => {
 
   return (
     <ProfileSection.Root
+      centered={false}
       title={localizationKeys('userProfile.start.passwordSection.title')}
       id='password'
-      sx={{ alignItems: 'center', [mqu.md]: { alignItems: 'flex-start' } }}
     >
       <Action.Root>
         <Action.Closed value='edit'>
           <ProfileSection.Item
             id='password'
-            sx={{
+            sx={t => ({
               paddingLeft: !passwordEnabled ? '0' : undefined,
-            }}
+              paddingTop: t.space.$0x25,
+              paddingBottom: t.space.$0x25,
+            })}
           >
-            {passwordEnabled && <Text sx={t => ({ fontSize: t.fontSizes.$xl })}>••••••••••</Text>}
+            {passwordEnabled && <Text variant='h2'>••••••••••</Text>}
 
             <Action.Trigger value='edit'>
               <ProfileSection.Button
diff --git a/packages/clerk-js/src/ui/elements/Section.tsx b/packages/clerk-js/src/ui/elements/Section.tsx
index 10e96f867ed..483c1da1fe3 100644
--- a/packages/clerk-js/src/ui/elements/Section.tsx
+++ b/packages/clerk-js/src/ui/elements/Section.tsx
@@ -138,10 +138,9 @@ const ProfileSectionItem = (props: ProfileSectionItemProps) => {
           justifyContent: 'space-between',
           width: '100%',
           alignItems: 'center',
-          padding: `${t.space.$2} ${t.space.$3} ${t.space.$1x5} ${t.space.$2x5}`,
+          padding: `${t.space.$1} ${t.space.$1} ${t.space.$1} ${t.space.$2x5}`,
           gap: t.space.$2,
           ...(hoverable && {
-            padding: `${t.space.$1} ${t.space.$1} ${t.space.$1} ${t.space.$2x5}`,
             borderRadius: t.radii.$lg,
             ':hover': { backgroundColor: t.colors.$neutralAlpha50 },
           }),
@@ -166,7 +165,6 @@ const ProfileSectionButton = (props: ProfileSectionButtonProps) => {
       elementDescriptor={descriptors.profileSectionPrimaryButton}
       elementId={descriptors.profileSectionPrimaryButton.setId(id)}
       variant='ghost'
-      textVariant='buttonSmall'
       sx={[
         t => ({
           whiteSpace: 'nowrap',

From 33fdeede5bb2bff7e26df015201a9a502a142f08 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Mon, 1 Apr 2024 13:26:22 +0300
Subject: [PATCH 2/2] chore(repo): Update Changeset

---
 .changeset/two-ways-buy.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/two-ways-buy.md

diff --git a/.changeset/two-ways-buy.md b/.changeset/two-ways-buy.md
new file mode 100644
index 00000000000..03d66e0abf6
--- /dev/null
+++ b/.changeset/two-ways-buy.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Height misalignment fixes for Password section in `<UserProfile/>`