dtp/gadget
1
0
Fork 0
Code Actions Packages Projects Releases Activity

Fix: Proper flexbox scrolling for FILES panel sidebar

Browse Source 
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)
This commit is contained in:
Rob Colbert 2026-05-12 17:40:11 -04:00
parent 6dba16a8c5
commit ec7b83d610
2 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gadget-code/frontend/src/components/FileTree.tsx
View File

@ -166,7 +166,7 @@ export default function FileTree({ workspaceMode, onFileSelect }: FileTreeProps)
const rootLoading = state.loadingPaths.has(''); const rootLoading = state.loadingPaths.has('');
return ( return (
<div className="overflow-auto p-2 h-full"> <div className="p-2">
{rootLoading && ( {rootLoading && (
<div className="flex items-center justify-center py-8"> <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> <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-brand"></div>

2
gadget-code/frontend/src/components/FilesPanel.tsx
View File

@ -10,7 +10,7 @@ export default function FilesPanel({ workspaceMode }: FilesPanelProps) {
const isReadWrite = workspaceMode === WorkspaceMode.User; const isReadWrite = workspaceMode === WorkspaceMode.User;
return ( 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"> <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"> <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
Files Files