From 5868c6cb0455735e7aae4c9b0b5d3f517f0d5e31 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Sat, 2 May 2026 08:59:45 -0500
Subject: [PATCH 1/4] refactor: remove collapsible editors.

---
 playwright/helpers/app-test-helpers.ts        |  8 +-
 playwright/layout-panels.spec.ts              | 57 +++++-------
 playwright/workspace-tabs.spec.ts             |  2 -
 src/index.html                                | 34 --------
 .../app-core/layout-diagnostics-setup.js      | 86 ++-----------------
 src/styles/layout-shell.css                   | 11 +--
 src/styles/panels-editor.css                  | 56 ------------
 7 files changed, 31 insertions(+), 223 deletions(-)

diff --git a/playwright/helpers/app-test-helpers.ts b/playwright/helpers/app-test-helpers.ts
index 20c2f08..4447f47 100644
--- a/playwright/helpers/app-test-helpers.ts
+++ b/playwright/helpers/app-test-helpers.ts
@@ -305,10 +305,8 @@ export const getActiveStylesEditorLineNumber = async (page: Page) => {
     .then(text => text.trim())
 }
 
-export const getCollapseButton = (
-  page: Page,
-  panelName: 'component' | 'styles' | 'preview',
-) => page.locator(`#collapse-${panelName}`)
+export const getCollapseButton = (page: Page, panelName: 'preview') =>
+  page.locator(`#collapse-${panelName}`)
 
 export const getToolsButton = (page: Page, panelName: 'component' | 'styles') =>
   page.locator(`#tools-${panelName}`)
@@ -564,7 +562,7 @@ export const connectByotWithSingleRepo = async (
 
 export const expectCollapseButtonState = async (
   page: Page,
-  panelName: 'component' | 'styles' | 'preview',
+  panelName: 'preview',
   {
     axis,
     direction,
diff --git a/playwright/layout-panels.spec.ts b/playwright/layout-panels.spec.ts
index 5647894..51048a2 100644
--- a/playwright/layout-panels.spec.ts
+++ b/playwright/layout-panels.spec.ts
@@ -162,17 +162,9 @@ test('expanded component and styles can shrink consistently in fixed layout', as
 test('panel collapse axis and direction match fixed layout', async ({ page }) => {
   await waitForInitialRender(page)
   await expect(page.getByRole('main')).toHaveClass(/app-grid--preview-right/)
+  await expect(page.locator('#collapse-component')).toHaveCount(0)
+  await expect(page.locator('#collapse-styles')).toHaveCount(0)
 
-  await expectCollapseButtonState(page, 'component', {
-    axis: 'vertical',
-    direction: 'none',
-    collapsed: false,
-  })
-  await expectCollapseButtonState(page, 'styles', {
-    axis: 'vertical',
-    direction: 'none',
-    collapsed: false,
-  })
   await expectCollapseButtonState(page, 'preview', {
     axis: 'horizontal',
     direction: 'right',
@@ -180,31 +172,22 @@ test('panel collapse axis and direction match fixed layout', async ({ page }) =>
   })
 })
 
-test('prevents collapsing all three panels at once', async ({ page }) => {
+test('preview panel can collapse and expand', async ({ page }) => {
   await waitForInitialRender(page)
-  const componentPanel = page.locator('#editor-panel-component')
-  const stylesPanel = page.locator('#editor-panel-styles')
-
-  await getCollapseButton(page, 'component').click()
-  await page.getByRole('button', { name: 'Open tab app.css' }).click()
-  await getCollapseButton(page, 'styles').click()
+  const previewPanel = page.locator('#preview-panel')
 
-  await expect(componentPanel).toHaveClass(/panel--collapsed-vertical/)
-  await expect(stylesPanel).toHaveClass(/panel--collapsed-vertical/)
+  await getCollapseButton(page, 'preview').click()
+  await expect(previewPanel).toHaveClass(/panel--collapsed-horizontal/)
 
   await expectCollapseButtonState(page, 'preview', {
     axis: 'horizontal',
     direction: 'right',
-    collapsed: false,
-    disabled: true,
+    collapsed: true,
+    disabled: false,
   })
-  await expect(getCollapseButton(page, 'preview')).toHaveAttribute(
-    'title',
-    'At least one panel must remain expanded.',
-  )
 
-  await page.getByRole('button', { name: 'Open tab App.tsx' }).click()
-  await getCollapseButton(page, 'component').click()
+  await getCollapseButton(page, 'preview').click()
+  await expect(previewPanel).not.toHaveClass(/panel--collapsed-horizontal/)
   await expectCollapseButtonState(page, 'preview', {
     axis: 'horizontal',
     direction: 'right',
@@ -215,25 +198,25 @@ test('prevents collapsing all three panels at once', async ({ page }) => {
 
 test('does not persist panel collapse state across reload', async ({ page }) => {
   await waitForInitialRender(page)
-  const componentPanel = page.locator('#editor-panel-component')
+  const previewPanel = page.locator('#preview-panel')
 
-  await getCollapseButton(page, 'component').click()
-  await expect(componentPanel).toHaveClass(/panel--collapsed-vertical/)
-  await expectCollapseButtonState(page, 'component', {
-    axis: 'vertical',
-    direction: 'none',
+  await getCollapseButton(page, 'preview').click()
+  await expect(previewPanel).toHaveClass(/panel--collapsed-horizontal/)
+  await expectCollapseButtonState(page, 'preview', {
+    axis: 'horizontal',
+    direction: 'right',
     collapsed: true,
   })
 
   await page.reload()
   await waitForInitialRender(page)
 
-  await expect(componentPanel).not.toHaveClass(
+  await expect(previewPanel).not.toHaveClass(
     /panel--collapsed-horizontal|panel--collapsed-vertical/,
   )
-  await expectCollapseButtonState(page, 'component', {
-    axis: 'vertical',
-    direction: 'none',
+  await expectCollapseButtonState(page, 'preview', {
+    axis: 'horizontal',
+    direction: 'right',
     collapsed: false,
   })
 })
diff --git a/playwright/workspace-tabs.spec.ts b/playwright/workspace-tabs.spec.ts
index 4b73e3a..577f558 100644
--- a/playwright/workspace-tabs.spec.ts
+++ b/playwright/workspace-tabs.spec.ts
@@ -414,8 +414,6 @@ test('active tab remains source of truth for visible editor panel', async ({ pag
   ).toHaveAttribute('aria-current', 'true')
   await expect(componentPanel).not.toHaveAttribute('hidden', '')
   await expect(stylesPanel).toHaveAttribute('hidden', '')
-
-  await page.locator('#collapse-component').click()
   await page.getByRole('button', { name: 'Open tab app.css' }).click()
 
   await expect(page.getByRole('button', { name: 'Open tab app.css' })).toHaveAttribute(
diff --git a/src/index.html b/src/index.html
index 5d33306..3f95a62 100644
--- a/src/index.html
+++ b/src/index.html
@@ -383,23 +383,6 @@ <h2 id="editor-header-component" class="panel-header__title-with-status">
                 </svg>
               </h2>
               <div class="controls controls--quick-actions panel-header-quick-actions">
-                <button
-                  class="panel-collapse-toggle"
-                  id="collapse-component"
-                  type="button"
-                  data-panel-collapse="component"
-                  data-collapse-axis="vertical"
-                  data-collapsed="false"
-                  aria-expanded="true"
-                  aria-controls="editor-panel-content-component"
-                  aria-label="Collapse editor panel"
-                  title="Collapse editor panel"
-                >
-                  <svg viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="m6 9 6 6 6-6"></path>
-                  </svg>
-                  <span class="panel-collapse-toggle__label">Collapse</span>
-                </button>
                 <button
                   class="icon-button editor-tools-toggle"
                   id="tools-component"
@@ -515,23 +498,6 @@ <h2 id="editor-header-styles" class="panel-header__title-with-status">
                 </svg>
               </h2>
               <div class="controls controls--quick-actions panel-header-quick-actions">
-                <button
-                  class="panel-collapse-toggle"
-                  id="collapse-styles"
-                  type="button"
-                  data-panel-collapse="styles"
-                  data-collapse-axis="vertical"
-                  data-collapsed="false"
-                  aria-expanded="true"
-                  aria-controls="editor-panel-content-styles"
-                  aria-label="Collapse editor panel"
-                  title="Collapse editor panel"
-                >
-                  <svg viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="m6 9 6 6 6-6"></path>
-                  </svg>
-                  <span class="panel-collapse-toggle__label">Collapse</span>
-                </button>
                 <button
                   class="icon-button editor-tools-toggle"
                   id="tools-styles"
diff --git a/src/modules/app-core/layout-diagnostics-setup.js b/src/modules/app-core/layout-diagnostics-setup.js
index 29f6615..01de54d 100644
--- a/src/modules/app-core/layout-diagnostics-setup.js
+++ b/src/modules/app-core/layout-diagnostics-setup.js
@@ -2,8 +2,6 @@ const createLayoutDiagnosticsSetup = ({
   compactAiControlsUi,
   appGrid,
   previewPanel,
-  componentEditorPanel,
-  stylesEditorPanel,
   panelCollapseButtons,
   editorKinds,
   editorPanelsByKind,
@@ -20,19 +18,15 @@ const createLayoutDiagnosticsSetup = ({
   cssEditor,
 }) => {
   const getPanelCollapseAxis = panelName => {
-    if (compactAiControlsUi.isCompactViewport()) {
+    if (panelName !== 'preview') {
       return 'vertical'
     }
 
-    if (panelName === 'preview') {
-      return 'horizontal'
-    }
-
-    if (panelName === 'component' || panelName === 'styles') {
+    if (compactAiControlsUi.isCompactViewport()) {
       return 'vertical'
     }
 
-    return 'vertical'
+    return 'horizontal'
   }
 
   const getPanelCollapseDirection = panelName => {
@@ -45,20 +39,10 @@ const createLayoutDiagnosticsSetup = ({
       return 'right'
     }
 
-    if (panelName === 'component') {
-      return 'left'
-    }
-
-    if (panelName === 'styles') {
-      return 'right'
-    }
-
     return 'right'
   }
 
   const panelCollapseState = {
-    component: false,
-    styles: false,
     preview: false,
   }
 
@@ -91,19 +75,7 @@ const createLayoutDiagnosticsSetup = ({
     }
   }
 
-  const normalizePanelCollapseState = () => {
-    const collapsedPanels = Object.entries(panelCollapseState)
-      .filter(([, isCollapsed]) => isCollapsed)
-      .map(([panelName]) => panelName)
-
-    if (collapsedPanels.length === Object.keys(panelCollapseState).length) {
-      panelCollapseState.preview = false
-    }
-  }
-
   const syncPanelCollapseButtons = () => {
-    const collapsedCount = Object.values(panelCollapseState).filter(Boolean).length
-
     for (const button of panelCollapseButtons) {
       const panelName = button.dataset.panelCollapse
       if (!panelName || !Object.hasOwn(panelCollapseState, panelName)) {
@@ -114,57 +86,26 @@ const createLayoutDiagnosticsSetup = ({
       const direction = getPanelCollapseDirection(panelName)
       const isCollapsed = panelCollapseState[panelName] === true
       const panelTitle = `${panelName.charAt(0).toUpperCase()}${panelName.slice(1)}`
-      const canCollapse = isCollapsed || collapsedCount < 2
 
       button.dataset.collapseAxis = axis
       button.dataset.collapseDirection = direction
       button.dataset.collapsed = isCollapsed ? 'true' : 'false'
       button.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true')
-      button.disabled = !canCollapse
-      button.setAttribute('aria-disabled', canCollapse ? 'false' : 'true')
+      button.disabled = false
+      button.setAttribute('aria-disabled', 'false')
       button.setAttribute(
         'aria-label',
         `${isCollapsed ? 'Expand' : 'Collapse'} ${panelTitle.toLowerCase()} panel`,
       )
       button.setAttribute(
         'title',
-        canCollapse
-          ? `${isCollapsed ? 'Expand' : 'Collapse'} ${panelTitle.toLowerCase()} panel`
-          : 'At least one panel must remain expanded.',
+        `${isCollapsed ? 'Expand' : 'Collapse'} ${panelTitle.toLowerCase()} panel`,
       )
     }
   }
 
   const applyPanelCollapseState = () => {
-    normalizePanelCollapseState()
-
     const previewAxis = getPanelCollapseAxis('preview')
-    const componentAxis = getPanelCollapseAxis('component')
-    const stylesAxis = getPanelCollapseAxis('styles')
-
-    if (componentEditorPanel) {
-      const isCollapsed = panelCollapseState.component
-      componentEditorPanel.classList.toggle(
-        'panel--collapsed-vertical',
-        isCollapsed && componentAxis === 'vertical',
-      )
-      componentEditorPanel.classList.toggle(
-        'panel--collapsed-horizontal',
-        isCollapsed && componentAxis === 'horizontal',
-      )
-    }
-
-    if (stylesEditorPanel) {
-      const isCollapsed = panelCollapseState.styles
-      stylesEditorPanel.classList.toggle(
-        'panel--collapsed-vertical',
-        isCollapsed && stylesAxis === 'vertical',
-      )
-      stylesEditorPanel.classList.toggle(
-        'panel--collapsed-horizontal',
-        isCollapsed && stylesAxis === 'horizontal',
-      )
-    }
 
     if (previewPanel) {
       const isCollapsed = panelCollapseState.preview
@@ -183,25 +124,12 @@ const createLayoutDiagnosticsSetup = ({
       panelCollapseState.preview && previewAxis === 'horizontal',
     )
     appGrid.classList.toggle('app-grid--preview-collapsed', panelCollapseState.preview)
-    appGrid.classList.toggle(
-      'app-grid--component-collapsed',
-      panelCollapseState.component,
-    )
-    appGrid.classList.toggle('app-grid--styles-collapsed', panelCollapseState.styles)
-    appGrid.classList.toggle(
-      'app-grid--component-collapsed-horizontal',
-      panelCollapseState.component && componentAxis === 'horizontal',
-    )
-    appGrid.classList.toggle(
-      'app-grid--styles-collapsed-horizontal',
-      panelCollapseState.styles && stylesAxis === 'horizontal',
-    )
 
     syncPanelCollapseButtons()
   }
 
   const togglePanelCollapse = panelName => {
-    if (!Object.hasOwn(panelCollapseState, panelName)) {
+    if (panelName !== 'preview') {
       return
     }
 
diff --git a/src/styles/layout-shell.css b/src/styles/layout-shell.css
index 3229703..e84cc4e 100644
--- a/src/styles/layout-shell.css
+++ b/src/styles/layout-shell.css
@@ -353,11 +353,6 @@
   min-height: var(--expanded-panel-min-height);
 }
 
-.editor-panel.panel--collapsed-horizontal,
-.editor-panel.panel--collapsed-vertical {
-  min-height: 0;
-}
-
 .preview-panel {
   grid-area: preview;
   position: relative;
@@ -438,11 +433,7 @@
     overflow: auto;
   }
 
-  .app-grid
-    :is(.editor-panel, .preview-panel):is(
-      .panel--collapsed-horizontal,
-      .panel--collapsed-vertical
-    ) {
+  .app-grid .preview-panel:is(.panel--collapsed-horizontal, .panel--collapsed-vertical) {
     min-height: 0;
   }
 
diff --git a/src/styles/panels-editor.css b/src/styles/panels-editor.css
index 6b9e22d..1f04a0c 100644
--- a/src/styles/panels-editor.css
+++ b/src/styles/panels-editor.css
@@ -523,35 +523,19 @@ textarea:focus {
   min-height: auto;
 }
 
-.editor-panel.panel--collapsed-vertical {
-  align-self: start;
-}
-
 .panel.preview.panel--collapsed-vertical {
   min-height: 0;
 }
 
-.editor-panel.panel--collapsed-vertical .editor-host,
-.editor-panel.panel--collapsed-vertical textarea,
 .preview-panel.panel--collapsed-vertical .preview-host,
-.editor-panel.panel--collapsed-vertical .panel-content,
 .preview-panel.panel--collapsed-vertical .panel-content {
   display: none;
 }
 
-.editor-panel.panel--collapsed-vertical .panel-header-main-actions,
-.editor-panel.panel--collapsed-vertical .panel-header .icon-button,
 .preview-panel.panel--collapsed-vertical .controls label {
   display: none;
 }
 
-.editor-panel.panel--collapsed-vertical .panel-header--grid {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
 .preview-panel.panel--collapsed-vertical .panel-header .controls {
   justify-content: center;
 }
@@ -596,46 +580,6 @@ textarea:focus {
   display: none;
 }
 
-.editor-panel.panel--collapsed-horizontal {
-  min-height: auto;
-}
-
-.editor-panel.panel--collapsed-horizontal .editor-host,
-.editor-panel.panel--collapsed-horizontal textarea,
-.editor-panel.panel--collapsed-horizontal .panel-content,
-.editor-panel.panel--collapsed-horizontal .panel-header-main-actions,
-.editor-panel.panel--collapsed-horizontal .panel-header .icon-button {
-  display: none;
-}
-
-.editor-panel.panel--collapsed-horizontal .panel-header {
-  height: 100%;
-  padding: 12px 8px;
-  border-bottom: none;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.editor-panel.panel--collapsed-horizontal .panel-header h2 {
-  writing-mode: vertical-rl;
-  transform: rotate(180deg);
-  font-size: 0.8rem;
-}
-
-.editor-panel.panel--collapsed-horizontal .panel-header-quick-actions {
-  width: 100%;
-  justify-content: center;
-}
-
-.editor-panel.panel--collapsed-horizontal .panel-collapse-toggle {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
-}
-
 @media (max-width: 900px) {
   .panel-collapse-toggle {
     width: 32px;

From 518de8962db34ee39c05d7d83611c4df9fa7985f Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Sat, 2 May 2026 09:13:12 -0500
Subject: [PATCH 2/4] refactor: breakpoint styles.

---
 src/styles/ai-controls.css      |  4 ++--
 src/styles/base.css             |  2 +-
 src/styles/diagnostics.css      |  2 +-
 src/styles/dialogs-overlays.css |  4 ++--
 src/styles/layout-shell.css     | 18 ++++++++++--------
 src/styles/panels-editor.css    |  2 +-
 src/styles/preview-controls.css |  2 +-
 7 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/styles/ai-controls.css b/src/styles/ai-controls.css
index 8ab6459..3deac13 100644
--- a/src/styles/ai-controls.css
+++ b/src/styles/ai-controls.css
@@ -1029,7 +1029,7 @@
   accent-color: var(--accent);
 }
 
-@media (max-width: 1090px) {
+@media (width <= 1090px) {
   .app-grid-layout-controls {
     flex-wrap: nowrap;
   }
@@ -1045,7 +1045,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .app-grid-layout-controls {
     flex-wrap: nowrap;
   }
diff --git a/src/styles/base.css b/src/styles/base.css
index bea6af9..cd12906 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -200,7 +200,7 @@ body {
   color: var(--shell-text);
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   body {
     height: auto;
     min-height: 100dvh;
diff --git a/src/styles/diagnostics.css b/src/styles/diagnostics.css
index 36ce040..f3d57b9 100644
--- a/src/styles/diagnostics.css
+++ b/src/styles/diagnostics.css
@@ -217,7 +217,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .diagnostics-drawer {
     top: auto;
     right: 24px;
diff --git a/src/styles/dialogs-overlays.css b/src/styles/dialogs-overlays.css
index 67a293b..5fc4f78 100644
--- a/src/styles/dialogs-overlays.css
+++ b/src/styles/dialogs-overlays.css
@@ -87,7 +87,7 @@
   outline-offset: 1px;
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .panel-header-main-actions .controls,
   .controls--actions {
     justify-content: flex-start;
@@ -128,7 +128,7 @@
   transform: translateY(0);
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .app-toast {
     left: 12px;
     right: 12px;
diff --git a/src/styles/layout-shell.css b/src/styles/layout-shell.css
index e84cc4e..bc62537 100644
--- a/src/styles/layout-shell.css
+++ b/src/styles/layout-shell.css
@@ -255,7 +255,7 @@
   border-right: 1px solid var(--border-subtle);
 }
 
-@media (max-width: 1090px) {
+@media (width <= 1090px) {
   .app-grid-layout-controls {
     display: inline-flex;
     flex-direction: row;
@@ -287,7 +287,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .app-grid-ai-toggle:not([hidden]) {
     display: inline-flex;
     align-items: center;
@@ -295,7 +295,7 @@
   }
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
   .app-header {
     flex-direction: column;
     align-items: flex-start;
@@ -391,20 +391,24 @@
   max-height: none;
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .app-header {
     z-index: 200;
   }
 
-  .app-grid {
+  .app-grid,
+  .app-grid.app-grid--workspace-context-visible,
+  .app-grid.app-grid--preview-collapsed-horizontal,
+  .app-grid.app-grid--workspace-context-visible.app-grid--preview-collapsed-horizontal {
     --mobile-editor-max-height: clamp(280px, 42dvh, 520px);
     --mobile-preview-max-height: clamp(320px, 52dvh, 680px);
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto auto auto auto;
+    grid-template-rows: auto auto auto auto auto;
     height: auto;
     grid-template-areas:
       'layout-controls'
       'workspace-tabs'
+      'workspace-context'
       'editors'
       'preview';
   }
@@ -444,8 +448,6 @@
   }
 
   .app-grid.app-grid--preview-collapsed-horizontal {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto;
     min-height: 0;
   }
 
diff --git a/src/styles/panels-editor.css b/src/styles/panels-editor.css
index 1f04a0c..620aad1 100644
--- a/src/styles/panels-editor.css
+++ b/src/styles/panels-editor.css
@@ -580,7 +580,7 @@ textarea:focus {
   display: none;
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .panel-collapse-toggle {
     width: 32px;
     height: 32px;
diff --git a/src/styles/preview-controls.css b/src/styles/preview-controls.css
index 58cc786..29e6f74 100644
--- a/src/styles/preview-controls.css
+++ b/src/styles/preview-controls.css
@@ -168,7 +168,7 @@
   stroke-linejoin: round;
 }
 
-@media (max-width: 480px) {
+@media (width <= 480px) {
   .preview-bg-label {
     position: absolute;
     width: 1px;

From 35ccfa3041d78a1af460e26b2ace07d743e06442 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Sat, 2 May 2026 09:28:15 -0500
Subject: [PATCH 3/4] refactor: pr comments.

---
 src/app.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index d8a0d67..4143d1d 100644
--- a/src/app.js
+++ b/src/app.js
@@ -379,8 +379,6 @@ const {
   compactAiControlsUi,
   appGrid,
   previewPanel,
-  componentEditorPanel,
-  stylesEditorPanel,
   panelCollapseButtons,
   editorKinds,
   editorPanelsByKind,

From 79f939b5e89a64ce8b63b796960b03fd15b57dcc Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Sat, 2 May 2026 09:37:58 -0500
Subject: [PATCH 4/4] fix: mobile tabs scrolling.

---
 src/styles/panels-editor.css | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/styles/panels-editor.css b/src/styles/panels-editor.css
index 620aad1..4b965b7 100644
--- a/src/styles/panels-editor.css
+++ b/src/styles/panels-editor.css
@@ -269,6 +269,11 @@
   border-top-color: var(--border-control);
 }
 
+.workspace-tab:has(.workspace-tab__name-input) {
+  position: relative;
+  z-index: 3;
+}
+
 .workspace-tabs-strip:has(> .workspace-tab:nth-child(n + 7)) > .workspace-tab {
   min-width: 148px;
 }
@@ -329,9 +334,9 @@
 
 .workspace-tab__name-input {
   width: min(320px, 52vw);
-  border: 1px solid var(--border-control);
+  border: 1px solid var(--border-strong);
   border-radius: 8px;
-  background: var(--surface-select);
+  background: var(--surface-select-option);
   color: var(--select-text);
   padding: 3px 8px;
   font: inherit;
@@ -590,3 +595,10 @@ textarea:focus {
     min-height: min(360px, var(--mobile-editor-max-height));
   }
 }
+
+@media (width <= 640px) {
+  .workspace-tab {
+    flex: 0 0 auto;
+    min-width: 148px;
+  }
+}