From c00b84f8810faaddcdc147eaa4ddfc04ea90602f Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Tue, 17 Mar 2026 19:44:16 -0500
Subject: [PATCH] fix: overflow scrolling.

---
 docs/next-steps.md              | 16 ++++------------
 src/styles/layout-shell.css     |  7 ++++++-
 src/styles/panels-editor.css    | 10 ++++++----
 src/styles/preview-controls.css |  1 +
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/next-steps.md b/docs/next-steps.md
index eebda75..9060f57 100644
--- a/docs/next-steps.md
+++ b/docs/next-steps.md
@@ -2,28 +2,20 @@
 
 Focused follow-up work for `@knighted/develop`.
 
-1. **Style isolation behavior docs**
-   - Document ShadowRoot on/off behavior and how style isolation changes in light DOM mode.
-   - Clarify that light DOM preview can inherit shell styles and include recommendations for scoping.
-
-2. **Preview UX polish**
-   - Keep tooltip affordances for mode-specific behavior.
-   - Continue tightening panel control alignment and spacing without introducing extra markup.
-
-3. **In-browser component/style linting**
+1. **In-browser component/style linting**
    - Explore running lint checks for component and style sources directly in the playground.
    - Prefer CDN-delivered tooling where possible and preserve graceful fallback behavior when unavailable.
 
-4. **In-browser component type checking**
+2. **In-browser component type checking**
    - Add editor-linked diagnostics navigation so each issue can jump to the exact line/column in the component source.
    - Surface line/column context directly in the diagnostics UI (not just message text) to speed up triage.
    - Continue improving typecheck performance for first-run and large sources while keeping the preview loop non-blocking.
 
-5. **In-browser component testing**
+3. **In-browser component testing**
    - Explore authoring and running component-focused tests in-browser (for example, a Vitest-compatible flow) using CDN-delivered tooling.
    - Define a lightweight test UX that supports writing tests, running them on demand, and displaying results in-app.
 
-6. **CDN failure recovery UX**
+4. **CDN failure recovery UX**
    - Detect transient CDN/module loading failures and surface a clear recovery action in-app.
    - Add a user-triggered retry path (for example, Reload page / Force reload) when runtime bootstrap imports fail.
    - Consider an optional automatic one-time retry before showing recovery controls, while avoiding infinite reload loops.
diff --git a/src/styles/layout-shell.css b/src/styles/layout-shell.css
index 51d2880..4022e3d 100644
--- a/src/styles/layout-shell.css
+++ b/src/styles/layout-shell.css
@@ -298,10 +298,15 @@
   overflow: hidden;
 }
 
+.app-grid:not(.app-grid--preview-right):not(.app-grid--preview-left) .preview-panel {
+  min-height: 0;
+}
+
 .preview-panel .panel-content {
   min-height: 0;
+  height: 100%;
   max-height: 100%;
-  overflow: hidden;
+  overflow: auto;
 }
 
 .preview-panel.panel--collapsed-horizontal,
diff --git a/src/styles/panels-editor.css b/src/styles/panels-editor.css
index 6871d7f..dd58f2c 100644
--- a/src/styles/panels-editor.css
+++ b/src/styles/panels-editor.css
@@ -323,8 +323,9 @@ textarea:focus {
 }
 
 .preview-panel.panel--collapsed-horizontal .panel-collapse-toggle {
-  width: 100%;
-  min-width: 0;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
   justify-content: center;
 }
 
@@ -377,8 +378,9 @@ textarea:focus {
 
 .component-panel.panel--collapsed-horizontal .panel-collapse-toggle,
 .styles-panel.panel--collapsed-horizontal .panel-collapse-toggle {
-  width: 100%;
-  min-width: 0;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
 }
 
 @media (max-width: 900px) {
diff --git a/src/styles/preview-controls.css b/src/styles/preview-controls.css
index 6eae4cc..c229497 100644
--- a/src/styles/preview-controls.css
+++ b/src/styles/preview-controls.css
@@ -8,6 +8,7 @@
   --preview-host-z-index: 1;
   display: var(--preview-host-display);
   flex: var(--preview-host-flex);
+  height: 100%;
   min-height: var(--preview-host-min-height);
   max-height: 100%;
   padding: var(--preview-host-padding);