opensource/sim
3
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-09-24 15:45:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

improvement(settings): match standalone shell chrome to the workspace one (#5992)

Browse Source 
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.
This commit is contained in:
Theodore Li
2026-07-27 20:34:23 -04:00
committed by GitHub
parent 75b8b6f3e5
commit fc396fcbf5
1 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sim/components/settings/standalone-settings-shell.tsx
+19 -11
View File
@@ -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>
)