improved placement of left sidepannels

Author: cyclotruc

app/templates/components/styles.html

@@ -90,6 +90,7 @@
         .workspace-grid {
             display: flex;
             min-height: 600px;
+            height: 100%;
             width: 100%;
             gap: 0; /* No gaps - panels share borders */
         }
@@ -99,7 +100,9 @@
             flex: 1.2 1 24%;     /* Takes 24% of available width */
             min-width: 240px;    /* Minimum: 240px */
             max-width: 380px;    /* Maximum: 380px */
-            overflow: auto;
+            overflow: hidden;    /* Changed from auto to hidden since inner divs handle scroll */
+            display: flex;
+            flex-direction: column;
         }
 
         /* Editor panel (center) - 52% of container width */

app/templates/components/workspace.html

@@ -26,9 +26,9 @@
         </div>
 
         <!-- Editor Container -->
-        <div class="bg-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] relative z-0">
+        <div class="bg-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] relative z-0" style="height: 600px;">
             <!-- Three-panel layout inside container -->
-            <div class="workspace-grid">
+            <div class="workspace-grid" style="height: 100%;">
                 {% include 'components/workspace_files.html' %}
                 {% include 'components/workspace_editor.html' %}
                 {% include 'components/workspace_actions.html' %}

app/templates/components/workspace_actions.html

@@ -1,6 +1,6 @@
 <!-- Right Panel: Add tools -->
-<div class="workspace-actions">
-    <div class="p-4">
+<div class="workspace-actions" style="height: 100%; display: flex; flex-direction: column;">
+    <div class="p-4 flex-1 overflow-y-auto">
         <h3 class="text-lg font-black text-black mb-4">Add tools</h3>
 
         <!-- QuickAction Section - Search Bar -->

app/templates/components/workspace_files.html

@@ -1,6 +1,6 @@
 <!-- Left Panel: File System -->
-<div class="workspace-sidebar bg-cyan-50 border-r-2 border-black p-4">
-    <div class="flex justify-between items-center mb-3">
+<div class="workspace-sidebar bg-cyan-50 border-r-2 border-black flex flex-col" style="height: 100%;">
+    <div class="flex justify-between items-center mb-3 px-4 pt-4">
         <h3 class="text-lg font-black text-black">Files</h3>
         <div class="flex gap-2">
             <button id="files-prev-btn" class="w-6 h-6 bg-gray-200 border-2 border-black text-black font-bold flex items-center justify-center shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all" title="Previous" disabled>
@@ -15,24 +15,30 @@ <h3 class="text-lg font-black text-black">Files</h3>
         </div>
     </div>
 
-    <div class="bg-white border-2 border-black p-3 h-48 overflow-y-auto mb-3">
-        <div id="file-tree" class="text-sm">
-            <!-- File tree will be populated here -->
+    <!-- File tree section with New File button -->
+    <div class="flex-1 overflow-hidden flex flex-col px-4 pb-3" style="min-height: 0;">
+        <div class="bg-white border-2 border-black p-3 mb-3 overflow-y-auto" style="min-height: 200px; max-height: 900px;">
+            <div id="file-tree" class="text-sm">
+                <!-- File tree will be populated here -->
+            </div>
+            <div id="files-empty-state" class="text-center text-gray-500 text-sm py-8 hidden">
+                No files yet. Use Quick Actions to add files.
+            </div>
         </div>
-        <div id="files-empty-state" class="text-center text-gray-500 text-sm py-8 hidden">
-            No files yet. Use Quick Actions to add files.
+        
+        <div class="flex gap-2">
+            <button id="new-file-button" class="w-full px-3 py-2 bg-cyan-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all flex items-center justify-center gap-1 text-sm">
+                <span class="mdi mdi-file-plus text-base"></span>
+                <span>New File</span>
+            </button>
         </div>
+        
+        <!-- Empty space filler that takes remaining room -->
+        <div class="flex-1"></div>
     </div>
 
-    <div class="flex gap-2">
-        <button id="new-file-button" class="w-full px-3 py-2 bg-cyan-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all flex items-center justify-center gap-1 text-sm">
-            <span class="mdi mdi-file-plus text-base"></span>
-            <span>New File</span>
-        </button>
-    </div>
-    
-    <!-- Context selector relocated here -->
-    <div class="mt-4 pt-4 border-t-2 border-black">
+    <!-- Context selector sticks to bottom -->
+    <div class="p-4 border-t-2 border-black bg-cyan-50" style="flex-shrink: 0;">
         <div class="flex flex-col gap-2">
             <div class="flex justify-between items-center mb-1">
                 <label class="text-sm font-black text-black">CONTEXT</label>