CSS fixes, refactor

src/app/editor.ts

@@ -12,7 +12,7 @@ const fixedHeightEditor = EditorView.theme({
         minWidth: "8em",
         flex: "none",
     },
-    ".cm-scroller": { overflow: "auto" },
+    ".cm-scroller": { overflow: "auto scroll" },
 });
 
 export class Editor {

src/app/editorgrid.ts

@@ -0,0 +1,35 @@
+import van from "vanjs-core";
+import * as vanX from "vanjs-ext";
+const v = van.tags;
+
+import { Editor } from "./editor";
+import * as u from "./utils";
+
+const EditorWrapper = (editor: any, del: any, k: any) =>
+    v.div(
+        { class: "flex flex-col" },
+        v.div(
+            { class: "flex" },
+            v.span({ class: "mx-1 flex-1" }, "Editor " + k),
+            u.InlineButton(del, "Close", "❌"),
+        ),
+        v.div({ class: "flex-auto h-4" }, editor.val.dom),
+    );
+
+const editors = vanX.reactive([]);
+
+export function addEditor() {
+    editors.push(vanX.noreactive(new Editor()));
+}
+
+export const EditorGrid = v.main({
+    class: "flex flex-auto gap-4 overflow-x-auto",
+});
+vanX.list(EditorGrid, editors, EditorWrapper);
+
+// const grid = v.main({
+//     class: "flex flex-auto gap-4 overflow-x-auto",
+// });
+// export const EditorGrid = vanX.list(grid, editors, EditorWrapper);
+// vanX.list(document.getElementById("editorGrid"), editors, EditorWrapper);
+// van.add(document.getElementById("editorGrid"), EditorGrid);

src/app/renderer.ts

@@ -7,30 +7,11 @@ const v = van.tags;
 
 import { Editor } from "./editor";
 import { FolderTreeView } from "./foldernav";
+import { EditorGrid, addEditor } from "./editorgrid";
 import * as u from "./utils";
 
-const EditorWrapper = (editor: any, del: any, k: any) =>
-    v.div(
-        { class: "flex flex-col" },
-        v.div(
-            { class: "flex" },
-            v.span({ class: "mx-1 flex-1" }, "Editor " + k),
-            u.InlineButton(del, "Close", "❌"),
-        ),
-        v.div({ class: "h-full" }, editor.val.dom),
-    );
-
-// Create and mount editor list
-const editors = vanX.reactive([]);
-vanX.list(document.getElementById("editorGrid"), editors, EditorWrapper);
-
-function addView() {
-    editors.push(vanX.noreactive(new Editor()));
-}
-
-document.getElementById("addEditor")?.addEventListener("click", addView);
-
-addView();
-
-// Mount the folder tree view to the nav
 van.add(document.querySelector("aside nav"), FolderTreeView);
+van.add(document.getElementById("editorGrid"), EditorGrid);
+
+document.getElementById("addEditor")?.addEventListener("click", addEditor);
+addEditor();