...

templates/index.html

@@ -51,19 +51,21 @@
     <div class="container-fluid">
         <div class="row h-100">
             <!-- Sidebar -->
-            <div class="col-md-2 sidebar">
+            <div class="col-md-2 sidebar" id="sidebarPane">
                 <!-- Collection Selector -->
                 <div class="collection-selector">
                     <label class="form-label small">Collection:</label>
                     <select id="collectionSelect" class="form-select form-select-sm"></select>
                 </div>
-
                 <!-- File Tree -->
                 <div id="fileTree" class="file-tree"></div>
             </div>
 
+            <!-- Resizer between sidebar and editor -->
+            <div class="column-resizer" id="resizer1"></div>
+
             <!-- Editor Pane -->
-            <div class="col-md-5 editor-pane">
+            <div class="col editor-pane" id="editorPane">
                 <div class="editor-header">
                     <input type="text" id="filenameInput" placeholder="filename.md"
                         class="form-control form-control-sm">
@@ -73,8 +75,11 @@
                 </div>
             </div>
 
+            <!-- Resizer between editor and preview -->
+            <div class="column-resizer" id="resizer2"></div>
+
             <!-- Preview Pane -->
-            <div class="col-md-5 preview-pane">
+            <div class="col preview-pane" id="previewPane">
                 <h3>Preview</h3>
                 <div id="preview">
                     <p class="text-muted">Start typing in the editor to see the preview</p>
@@ -159,6 +164,7 @@
     <script src="/static/js/editor.js"></script>
     <script src="/static/js/ui-utils.js"></script>
     <script src="/static/js/app.js"></script>
+    <script src="/static/js/column-resizer.js"></script>
 </body>
 
 </html>