feat(mobile): polish account panel and settings layout

.changeset/polish-account-settings-mobile.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Polish the account panel and settings layout on mobile.

src/app/components/user-profile/UserHero.tsx

@@ -202,7 +202,7 @@ export function UserHero({
                 maxHeight: isFullStatus ? toRem(105) : toRem(48),
                 cursor: allowEditing || isExpandable ? 'pointer' : 'default',
                 display: 'flex',
-                width: 'fit-content',
+                width: allowEditing ? '100%' : 'fit-content',
                 padding: `${toRem(8)} ${toRem(12)}`,
                 backgroundColor: statusSurfaceColor,
                 color: textColor,
@@ -218,7 +218,7 @@ export function UserHero({
               <Box
                 direction="Row"
                 gap="100"
-                style={{ height: '100%', maxWidth: allowEditing ? toRem(210) : '100%' }}
+                style={{ height: '100%', maxWidth: '100%', flex: allowEditing ? 1 : undefined }}
               >
                 {isFullStatus ? (
                   <Scroll visibility="Hover" hideTrack style={{ height: '100%', flex: 1 }}>

src/app/features/settings/SettingsRoute.tsx

@@ -102,15 +102,18 @@ export function SettingsRoute({ routeSection }: SettingsRouteProps) {
     if (section === undefined) return;
 
     if (screenSize === ScreenSize.Mobile) {
+      if (routeState?.backgroundLocation) {
+        const backTarget = getSettingsCloseTarget(routeState);
+        navigate(backTarget.to, { replace: true, state: backTarget.state });
+        return;
+      }
+
       if (hasPreviousEntry) {
         navigate(-1);
         return;
       }
 
-      navigate(getSettingsPath(), {
-        replace: true,
-        state: routeState?.backgroundLocation ? routeState : undefined,
-      });
+      navigate(getSettingsPath(), { replace: true });
       return;
     }
 

src/app/features/settings/SettingsSectionPage.tsx

@@ -3,7 +3,7 @@ import { Box, IconButton, Text } from 'folds';
 import { Page, PageHeader } from '$components/page';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { ArrowLeft, composerIcon, X } from '$components/icons/phosphor';
-import { settingsHeader } from './styles.css';
+import { settingsHeader, settingsSectionBody } from './styles.css';
 
 type SettingsSectionPageProps = {
   title: ReactNode;
@@ -49,7 +49,9 @@ export function SettingsSectionPage({
           </Box>
         </Box>
       </PageHeader>
-      <Box grow="Yes">{children}</Box>
+      <Box grow="Yes" className={settingsSectionBody}>
+        {children}
+      </Box>
     </Page>
   );
 }

src/app/features/settings/styles.css.ts

@@ -1,11 +1,24 @@
-import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
+import { globalStyle, style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
 import { messageJumpHighlight } from '$components/message/layout/layout.css';
 
 export const SequenceCardStyle = style({
   padding: config.space.S300,
 });
 
+export const settingsSectionBody = style({
+  width: '100%',
+  maxWidth: toRem(800),
+  marginInline: 'auto',
+});
+
+globalStyle(`${settingsSectionBody} *`, {
+  scrollbarWidth: 'none',
+});
+globalStyle(`${settingsSectionBody} *::-webkit-scrollbar`, {
+  display: 'none',
+});
+
 export const settingsHeader = style({
   paddingLeft: config.space.S300,
   paddingRight: config.space.S200,

src/app/pages/client/profile/Profile.tsx

@@ -13,6 +13,7 @@ import {
 } from 'folds';
 import { GearSix, SquaresFour, menuIcon, sizedIcon } from '$components/icons/phosphor';
 import { PageNav, PageNavHeader } from '$components/page';
+import { NavButton, NavItem, NavItemContent } from '$components/nav';
 import { useEffect, useMemo, useState } from 'react';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { useSetting } from '$state/hooks/settings';
@@ -224,18 +225,18 @@ export function ProfileMobile() {
                   const IconComponent = item.icon;
 
                   return (
-                    <MenuItem
-                      key={item.id}
-                      radii="300"
-                      size="300"
-                      variant="Background"
-                      before={menuIcon(IconComponent)}
-                      onClick={() => openSettings(item.id)}
-                    >
-                      <Text size="T300" truncate>
-                        {item.name}
-                      </Text>
-                    </MenuItem>
+                    <NavItem key={item.id} variant="Background" radii="400">
+                      <NavButton onClick={() => openSettings(item.id)} aria-label={item.name}>
+                        <NavItemContent>
+                          <Box as="span" grow="Yes" alignItems="Center" gap="200">
+                            {menuIcon(IconComponent)}
+                            <Text as="span" size="Inherit" truncate>
+                              {item.name}
+                            </Text>
+                          </Box>
+                        </NavItemContent>
+                      </NavButton>
+                    </NavItem>
                   );
                 })}
               </Box>