...

static/css/layout.css

@@ -9,31 +9,89 @@ html, body {
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-.container-fluid {
-    height: calc(100% - 56px);
+/* Column Resizer */
+.column-resizer {
+    width: 4px;
+    background-color: var(--border-color);
+    cursor: col-resize;
+    transition: background-color 0.2s ease;
+    user-select: none;
+    flex-shrink: 0;
 }
 
+.column-resizer:hover {
+    background-color: var(--link-color);
+    width: 6px;
+    margin: 0 -1px;
+}
+
+.column-resizer.dragging {
+    background-color: var(--link-color);
+}
+
+/* Adjust container for flex layout */
+.container-fluid {
+    display: flex;
+    flex-direction: row;
+    height: calc(100% - 56px);
+    padding: 0;
+}
+
+.row {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    height: 100%;
+}
+
+#sidebarPane {
+    flex: 0 0 20%;
+    min-width: 150px;
+    max-width: 40%;
+    padding: 0;
+}
+
+#editorPane {
+    flex: 1 1 40%;
+    min-width: 250px;
+    max-width: 70%;
+    padding: 0;
+}
+
+#previewPane {
+    flex: 1 1 40%;
+    min-width: 250px;
+    max-width: 70%;
+    padding: 0;
+}
+
+/* Sidebar - improved */
 .sidebar {
     background-color: var(--bg-secondary);
     border-right: 1px solid var(--border-color);
     overflow-y: auto;
+    overflow-x: hidden;
     height: 100%;
     transition: background-color 0.3s ease;
-}
-
-.editor-pane {
-    background-color: var(--bg-primary);
-    height: 100%;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--border-color);
 }
 
-.preview-pane {
-    background-color: var(--bg-primary);
-    height: 100%;
+.sidebar h6 {
+    margin: 12px 8px 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+#fileTree {
+    flex: 1;
     overflow-y: auto;
-    padding: 20px;
+    overflow-x: hidden;
+    padding: 4px 0;
 }
 
 /* Navbar */