diff --git a/src/components/main-content/hooks/useEditorSidebar.ts b/src/components/main-content/hooks/useEditorSidebar.ts index e55e334..7168867 100644 --- a/src/components/main-content/hooks/useEditorSidebar.ts +++ b/src/components/main-content/hooks/useEditorSidebar.ts @@ -18,6 +18,7 @@ export function useEditorSidebar({ const [editorWidth, setEditorWidth] = useState(initialWidth); const [editorExpanded, setEditorExpanded] = useState(false); const [isResizing, setIsResizing] = useState(false); + const [hasManualWidth, setHasManualWidth] = useState(false); const resizeHandleRef = useRef(null); const handleFileOpen = useCallback( @@ -50,6 +51,9 @@ export function useEditorSidebar({ return; } + // Once the user starts dragging, width should be controlled by drag state + // instead of "fill available space" layout mode. + setHasManualWidth(true); setIsResizing(true); event.preventDefault(); }, @@ -101,6 +105,7 @@ export function useEditorSidebar({ editingFile, editorWidth, editorExpanded, + hasManualWidth, resizeHandleRef, handleFileOpen, handleCloseEditor, diff --git a/src/components/main-content/types/types.ts b/src/components/main-content/types/types.ts index cb49bcf..47cd6d2 100644 --- a/src/components/main-content/types/types.ts +++ b/src/components/main-content/types/types.ts @@ -95,6 +95,7 @@ export interface EditorSidebarProps { isMobile: boolean; editorExpanded: boolean; editorWidth: number; + hasManualWidth: boolean; resizeHandleRef: RefObject; onResizeStart: (event: MouseEvent) => void; onCloseEditor: () => void; diff --git a/src/components/main-content/view/MainContent.tsx b/src/components/main-content/view/MainContent.tsx index 8a55054..a6839de 100644 --- a/src/components/main-content/view/MainContent.tsx +++ b/src/components/main-content/view/MainContent.tsx @@ -66,6 +66,7 @@ function MainContent({ editingFile, editorWidth, editorExpanded, + hasManualWidth, resizeHandleRef, handleFileOpen, handleCloseEditor, @@ -109,7 +110,7 @@ function MainContent({ />
-
+
- diff --git a/src/components/main-content/view/subcomponents/EditorSidebar.tsx b/src/components/main-content/view/subcomponents/EditorSidebar.tsx index ea6cf70..814a30f 100644 --- a/src/components/main-content/view/subcomponents/EditorSidebar.tsx +++ b/src/components/main-content/view/subcomponents/EditorSidebar.tsx @@ -9,6 +9,7 @@ export default function EditorSidebar({ isMobile, editorExpanded, editorWidth, + hasManualWidth, resizeHandleRef, onResizeStart, onCloseEditor, @@ -36,7 +37,8 @@ export default function EditorSidebar({ ); } - const useFlex = editorExpanded || fillSpace; + // Keep "fill space" as default in files tab, but allow user drag to take control. + const useFlex = editorExpanded || (fillSpace && !hasManualWidth); return ( <>