From ec7b83d6101e2b7d0d9d96692ea4f84848fa71a0 Mon Sep 17 00:00:00 2001
From: Rob Colbert <rob@digitaltelepresence.com>
Date: Tue, 12 May 2026 17:40:11 -0400
Subject: [PATCH] Fix: Proper flexbox scrolling for FILES panel sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root Cause: CSS flex items default to min-height: auto, which prevents
flex-1 elements from shrinking below their content size. This caused
the FilesPanel to grow beyond its allocated space when the file tree
had many entries, pushing content off-screen.

Changes:
- FilesPanel.tsx: Added min-h-0 to root div to override min-height: auto
  This allows flex-1 to actually constrain height and enable scrolling
- FileTree.tsx: Removed redundant overflow-auto and h-full from root div
  The parent (FilesPanel flex-1 overflow-auto) already handles scrolling.
  Nested scroll containers create height resolution issues.

The sidebar layout is now a clean single-scroll-container hierarchy:
  Sidebar (flex flex-col, no overflow)
  ↳ SESSION (shrink-0, natural height)
  ↳ PROJECT (shrink-0, natural height)
  ↳ FilesPanel (flex-1 min-h-0) — constrained to available space
    ↳ Header (natural height)
    ↳ Scroll area (flex-1 overflow-auto) — THE scroll container
      ↳ FileTree (p-2 only) — no overflow, no h-full
    ↳ Footer (natural height)
---
 gadget-code/frontend/src/components/FileTree.tsx   | 2 +-
 gadget-code/frontend/src/components/FilesPanel.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/gadget-code/frontend/src/components/FileTree.tsx b/gadget-code/frontend/src/components/FileTree.tsx
index f3f6509..c9857c6 100644
--- a/gadget-code/frontend/src/components/FileTree.tsx
+++ b/gadget-code/frontend/src/components/FileTree.tsx
@@ -166,7 +166,7 @@ export default function FileTree({ workspaceMode, onFileSelect }: FileTreeProps)
   const rootLoading = state.loadingPaths.has('');
 
   return (
-    <div className="overflow-auto p-2 h-full">
+    <div className="p-2">
       {rootLoading && (
         <div className="flex items-center justify-center py-8">
           <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-brand"></div>
diff --git a/gadget-code/frontend/src/components/FilesPanel.tsx b/gadget-code/frontend/src/components/FilesPanel.tsx
index 237a173..cddef69 100644
--- a/gadget-code/frontend/src/components/FilesPanel.tsx
+++ b/gadget-code/frontend/src/components/FilesPanel.tsx
@@ -10,7 +10,7 @@ export default function FilesPanel({ workspaceMode }: FilesPanelProps) {
   const isReadWrite = workspaceMode === WorkspaceMode.User;
 
   return (
-    <div className="border-t border-border-subtle flex flex-col flex-1">
+    <div className="border-t border-border-subtle flex flex-col flex-1 min-h-0">
       <div className="flex items-center justify-between px-4 py-2 bg-bg-tertiary">
         <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
           Files