fix(mosaic): tighten the password row and keep header actions outlined

The password card shows its value as a single list item instead of a
full-height row, a row's content centers within its minimum height, and
the sign-out-all action uses the outline variant like other header
actions.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Author: maxyinger

packages/mosaic/src/components/section/section.styles.ts

@@ -74,6 +74,7 @@ export const styles = stylex.create({
     },
     display: 'flex',
     flexDirection: 'column',
+    justifyContent: 'center',
     rowGap: space['2'],
     minHeight: `calc(${space['18.5']} + 1px)`,
     width: '100%',

packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx

@@ -120,7 +120,7 @@ describe('UserProfileSecurityPanelView', () => {
 
     await user.click(screen.getByRole('button', { name: 'Add passkey' }));
     const signOutAll = screen.getByRole('button', { name: 'Sign out of all devices' });
-    expect(signOutAll).toHaveAttribute('data-variant', 'ghost');
+    expect(signOutAll).toHaveAttribute('data-variant', 'outline');
     expect(screen.getByRole('group', { name: 'Active devices' }).querySelector('.cl-section-header')).toContainElement(
       signOutAll,
     );

packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx

@@ -94,7 +94,7 @@ export function UserProfileActiveDevicesSectionView({
                   ref={signOutAllTrigger}
                   color='neutral'
                   size='sm'
-                  variant='ghost'
+                  variant='outline'
                   onClick={() => setIsSignOutAllOpen(true)}
                 >
                   {m.signOutAll}

packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-row.view.tsx

@@ -22,7 +22,7 @@ export function UserProfilePasswordRowView({
 }: UserProfilePasswordSectionViewProps) {
   const m = useMessages('userProfilePasswordSection');
   return (
-    <Section.Row>
+    <Section.Items>
       <Section.Item>
         <Section.Content>
           <Section.Description>{hasPassword ? m.masked : m.noPasswordSet}</Section.Description>
@@ -41,7 +41,7 @@ export function UserProfilePasswordRowView({
           </Section.Actions>
         ) : null}
       </Section.Item>
-    </Section.Row>
+    </Section.Items>
   );
 }