New settings layouts. Segment management screen.

src/app/(main)/settings/profile/ProfilePage.tsx

@@ -1,16 +1,19 @@
 'use client';
 import { ProfileSettings } from './ProfileSettings';
 import { useMessages } from '@/components/hooks';
-import { SectionHeader } from '@/components/common/SectionHeader';
+import { Panel } from '@/components/common/Panel';
 import { Column } from '@umami/react-zen';
+import { PageHeader } from '@/components/common/PageHeader';
 
 export function ProfilePage() {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Column gap>
-      <SectionHeader title={formatMessage(labels.profile)} />
-      <ProfileSettings />
+    <Column gap="6">
+      <PageHeader title={formatMessage(labels.profile)} />
+      <Panel>
+        <ProfileSettings />
+      </Panel>
     </Column>
   );
 }

src/app/(main)/settings/profile/ProfileSettings.tsx

@@ -34,12 +34,10 @@ export function ProfileSettings() {
         <Label>{formatMessage(labels.username)}</Label>
         {username}
       </Column>
-
       <Column>
         <Label>{formatMessage(labels.role)}</Label>
         {renderRole(role)}
       </Column>
-
       {!cloudMode && (
         <Column>
           <Label>{formatMessage(labels.password)}</Label>