style: based on BaseModalLayout modified

src/components/widget/panel/PanelHeader.vue

@@ -1,6 +0,0 @@
-<template>
-  <div class="flex h-12 shrink-0 items-center gap-2 px-3">
-    <slot name="icon" />
-    <slot />
-  </div>
-</template>

src/platform/settings/components/SettingDialog.vue

@@ -1,17 +1,17 @@
 <template>
-  <BaseModalLayout content-title="" data-testid="settings-dialog">
-    <template #leftPanel>
-      <div class="flex h-full w-full flex-col bg-modal-panel-background">
-        <PanelHeader>
-          <template #icon>
+  <BaseModalLayout
+    content-title=""
+    data-testid="settings-dialog"
+    class="settings-dialog"
+  >
+    <template #leftPanelHeaderTitle>
       <WorkspaceProfilePic
         v-if="teamWorkspacesEnabled"
         class="size-6 text-xs"
         :workspace-name="workspaceName"
       />
       <i v-else class="pi pi-cog" />
-          </template>
-          <span class="text-neutral text-base">
+      <span class="flex-auto select-none text-nowrap text-neutral text-base">
         {{ teamWorkspacesEnabled ? workspaceName : $t('g.settings') }}
       </span>
       <Tag
@@ -20,8 +20,9 @@
         severity="warn"
         class="ml-2 text-xs"
       />
-        </PanelHeader>
+    </template>
 
+    <template #leftPanel>
       <div class="px-3">
         <SearchBox
           v-model:model-value="searchQuery"
@@ -53,7 +54,6 @@
           </NavItem>
         </div>
       </nav>
-      </div>
     </template>
 
     <template #header />
@@ -93,7 +93,6 @@ import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserM
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import NavItem from '@/components/widget/nav/NavItem.vue'
 import NavTitle from '@/components/widget/nav/NavTitle.vue'
-import PanelHeader from '@/components/widget/panel/PanelHeader.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { isStaging } from '@/config/staging'
 import ColorPaletteMessage from '@/platform/settings/components/ColorPaletteMessage.vue'
@@ -193,3 +192,10 @@ watch(activeCategoryKey, (newKey, oldKey) => {
   }
 })
 </script>
+
+<style>
+.settings-dialog.base-widget-layout {
+  max-width: 1400px;
+  aspect-ratio: auto !important;
+}
+</style>