fix(platform): reserve shell controls when a panel takes over

Author: emir-karabeg

apps/sim/platform/checks/desktop/renderer.spec.ts

@@ -38,6 +38,16 @@ test('the actual desktop renderer shares product routes, reserves native chrome
       )
     ).toBeCloseTo(1.25, 1)
     await page.screenshot({ path: testInfo.outputPath('desktop-chat.png') })
+    await page.getByRole('button', { name: 'Collapse sidebar' }).click()
+    await panel.getByRole('button', { name: 'Expand panel' }).click()
+    const navigation = await page.getByRole('button', { name: 'Expand sidebar' }).boundingBox()
+    const firstTab = panel.getByRole('tab', { name: 'Terminal' })
+    const firstTabBox = await firstTab.boundingBox()
+    if (!navigation || !firstTabBox) throw new Error('The navigation and first tab must be visible')
+    expect(firstTabBox.x).toBeGreaterThanOrEqual(navigation.x + navigation.width)
+    await firstTab.click()
+    await expect(panel.getByRole('region', { name: 'Terminal history' })).toBeVisible()
+    await panel.getByRole('button', { name: 'Restore split panel' }).click()
     await app.evaluate(({ BrowserWindow }) =>
       BrowserWindow.getAllWindows()
         .find((w) => w.isVisible())

apps/sim/platform/design-system/components/panel-tabs.module.css

@@ -14,7 +14,7 @@
   align-items: center;
   flex: none;
   gap: var(--spacing-4);
-  padding-inline: var(--spacing-12);
+  padding-inline: max(var(--ui-navigation-inset), var(--spacing-12)) var(--spacing-12);
   min-inline-size: 0;
   height: var(--height-nav);
   border-block-end: var(--spacing-stroke-default) solid var(--ui-divider);
@@ -26,6 +26,11 @@
 .header button {
   -webkit-app-region: no-drag;
 }
+@container panel-frame (width > 48rem) {
+  .header:not([data-expanded]) {
+    padding-inline-start: var(--spacing-12);
+  }
+}
 .strip {
   min-width: 0;
   overflow: auto;

apps/sim/platform/design-system/components/panel-tabs.tsx

@@ -38,7 +38,7 @@ export function PanelTabs({
         if (typeof value === 'string') onSelect(value)
       }}
     >
-      <header className={styles.header}>
+      <header className={styles.header} data-expanded={expanded || undefined}>
         <div className={styles.strip}>
           <Tabs.List className={styles.tabs} aria-label='Chat panel tabs' activateOnFocus>
             {tabs.map((tab) => (