Fix: Proper flexbox scrolling for FILES panel sidebar
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:
parent
6dba16a8c5
commit
ec7b83d610
@ -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>
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user