From a02d11e4f81f3fa9c53b549c1a8f5dde5aa130b3 Mon Sep 17 00:00:00 2001
From: Theodore Li <theo@sim.ai>
Date: Mon, 27 Jul 2026 17:08:09 -0700
Subject: [PATCH] improvement(settings): match standalone shell chrome to the
 workspace one

Account, organization, and self-host settings framed both columns in a
rounded border and sat the pair inside an outer p-2, so the same section
looked different depending on whether it was reached from a workspace.

Mirrors WorkspaceChrome instead: the sidebar column is flush and
borderless against the app surface, and only the content pane carries the
rounded border.
---
 .../settings/standalone-settings-shell.tsx    | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/apps/sim/components/settings/standalone-settings-shell.tsx b/apps/sim/components/settings/standalone-settings-shell.tsx
index c46478cb604..c7d45633788 100644
--- a/apps/sim/components/settings/standalone-settings-shell.tsx
+++ b/apps/sim/components/settings/standalone-settings-shell.tsx
@@ -134,22 +134,30 @@ export function StandaloneSettingsShell(props: StandaloneSettingsShellProps) {
 
   return (
     <ToastProvider>
-      <div className='flex h-screen w-full overflow-hidden bg-[var(--surface-1)] p-2'>
+      {/*
+        Mirrors the in-workspace chrome (WorkspaceChrome): a flush, borderless
+        sidebar column against the app surface, and only the content pane
+        carrying the rounded border. Keep the two in step — a settings page
+        should look the same whether it is reached inside a workspace or not.
+      */}
+      <div className='flex h-screen w-full overflow-hidden bg-[var(--surface-1)]'>
         <aside
-          className='mr-2 flex w-[248px] flex-shrink-0 flex-col rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] pt-3'
+          className='flex h-full w-[248px] flex-shrink-0 flex-col overflow-hidden bg-[var(--surface-1)] pt-3'
           aria-label={`${SETTINGS_PLANE_CHROME[plane].label} settings navigation`}
         >
           {sidebar}
         </aside>
-        <main className='min-w-0 flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
-          <SettingsHeaderProvider>
-            <SettingsHeaderShell>
-              <SettingsSectionProvider plane={plane} section={activeSection}>
-                {children}
-              </SettingsSectionProvider>
-            </SettingsHeaderShell>
-          </SettingsHeaderProvider>
-        </main>
+        <div className='flex min-w-0 flex-1 flex-col p-[8px] pl-0'>
+          <main className='flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
+            <SettingsHeaderProvider>
+              <SettingsHeaderShell>
+                <SettingsSectionProvider plane={plane} section={activeSection}>
+                  {children}
+                </SettingsSectionProvider>
+              </SettingsHeaderShell>
+            </SettingsHeaderProvider>
+          </main>
+        </div>
       </div>
     </ToastProvider>
   )