Skip to content

Commit fc396fc

Browse files
improvement(settings): match standalone shell chrome to the workspace one (#5992)
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.
1 parent 75b8b6f commit fc396fc

1 file changed

Lines changed: 19 additions & 11 deletions

File tree

apps/sim/components/settings/standalone-settings-shell.tsx

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -134,22 +134,30 @@ export function StandaloneSettingsShell(props: StandaloneSettingsShellProps) {
134134

135135
return (
136136
<ToastProvider>
137-
<div className='flex h-screen w-full overflow-hidden bg-[var(--surface-1)] p-2'>
137+
{/*
138+
Mirrors the in-workspace chrome (WorkspaceChrome): a flush, borderless
139+
sidebar column against the app surface, and only the content pane
140+
carrying the rounded border. Keep the two in step — a settings page
141+
should look the same whether it is reached inside a workspace or not.
142+
*/}
143+
<div className='flex h-screen w-full overflow-hidden bg-[var(--surface-1)]'>
138144
<aside
139-
className='mr-2 flex w-[248px] flex-shrink-0 flex-col rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] pt-3'
145+
className='flex h-full w-[248px] flex-shrink-0 flex-col overflow-hidden bg-[var(--surface-1)] pt-3'
140146
aria-label={`${SETTINGS_PLANE_CHROME[plane].label} settings navigation`}
141147
>
142148
{sidebar}
143149
</aside>
144-
<main className='min-w-0 flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
145-
<SettingsHeaderProvider>
146-
<SettingsHeaderShell>
147-
<SettingsSectionProvider plane={plane} section={activeSection}>
148-
{children}
149-
</SettingsSectionProvider>
150-
</SettingsHeaderShell>
151-
</SettingsHeaderProvider>
152-
</main>
150+
<div className='flex min-w-0 flex-1 flex-col p-[8px] pl-0'>
151+
<main className='flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
152+
<SettingsHeaderProvider>
153+
<SettingsHeaderShell>
154+
<SettingsSectionProvider plane={plane} section={activeSection}>
155+
{children}
156+
</SettingsSectionProvider>
157+
</SettingsHeaderShell>
158+
</SettingsHeaderProvider>
159+
</main>
160+
</div>
153161
</div>
154162
</ToastProvider>
155163
)

0 commit comments

Comments
 (0)