fix(file-editor-sidebar): editor is now draggable

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<HTMLDivElement | null>(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,

src/components/main-content/types/types.ts

@@ -95,6 +95,7 @@ export interface EditorSidebarProps {
   isMobile: boolean;
   editorExpanded: boolean;
   editorWidth: number;
+  hasManualWidth: boolean;
   resizeHandleRef: RefObject<HTMLDivElement>;
   onResizeStart: (event: MouseEvent<HTMLDivElement>) => void;
   onCloseEditor: () => void;

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({
       />
 
       <div className="flex-1 flex min-h-0 overflow-hidden">
-        <div className={`flex flex-col min-h-0 overflow-hidden ${editorExpanded ? 'hidden' : ''} ${activeTab === 'files' && editingFile ? 'w-[280px] flex-shrink-0' : 'flex-1'}`}>
+        <div className={`flex flex-col min-h-0 min-w-0 overflow-hidden ${editorExpanded ? 'hidden' : ''} flex-1`}>
           <div className={`h-full ${activeTab === 'chat' ? 'block' : 'hidden'}`}>
             <ErrorBoundary showDetails>
               <ChatInterface
@@ -162,15 +163,16 @@ function MainContent({
           <div className={`h-full overflow-hidden ${activeTab === 'preview' ? 'block' : 'hidden'}`} />
         </div>
 
-        <EditorSidebar
-          editingFile={editingFile}
-          isMobile={isMobile}
-          editorExpanded={editorExpanded}
-          editorWidth={editorWidth}
-          resizeHandleRef={resizeHandleRef}
-          onResizeStart={handleResizeStart}
-          onCloseEditor={handleCloseEditor}
-          onToggleEditorExpand={handleToggleEditorExpand}
+          <EditorSidebar
+            editingFile={editingFile}
+            isMobile={isMobile}
+            editorExpanded={editorExpanded}
+            editorWidth={editorWidth}
+            hasManualWidth={hasManualWidth}
+            resizeHandleRef={resizeHandleRef}
+            onResizeStart={handleResizeStart}
+            onCloseEditor={handleCloseEditor}
+            onToggleEditorExpand={handleToggleEditorExpand}
           projectPath={selectedProject.path}
           fillSpace={activeTab === 'files'}
         />

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 (
     <>