From f43d79769c8afc04449b0cce85758438d83991ac Mon Sep 17 00:00:00 2001
From: Chris Mounce <christophermounce@gmail.com>
Date: Sun, 24 Aug 2025 17:15:14 -0700
Subject: [PATCH] Fix size of CodeMirror to available viewport

---
 src/app.css               | 27 +++++++++++++++++++++++++++
 src/app.tsx               |  1 +
 src/components/App.tsx    | 21 ++++++++++++++-------
 src/components/Editor.tsx | 13 +++----------
 4 files changed, 45 insertions(+), 17 deletions(-)
 create mode 100644 src/app.css

diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..0e48e0c
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,27 @@
+body {
+  margin: 0;
+}
+
+.app {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.navbar {
+  height: 2.5lh;
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  flex-shrink: 0;
+  background-color: #cde;
+}
+
+.editor-component {
+  flex: 1;
+  overflow: hidden;
+}
+
+.editor-component .cm-editor {
+  height: 100%;
+}
diff --git a/src/app.tsx b/src/app.tsx
index a8e1adf..b63587f 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,5 +1,6 @@
 import { render } from 'solid-js/web';
 import App from './components/App';
+import './app.css';
 
 const app = document.getElementById('app')!;
 
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 473ed00..37ab455 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -6,13 +6,20 @@ function App() {
   const [currentFile, setCurrentFile] = createSignal<string | null>(null);
 
   return (
-    <Show
-      when={currentFile()}
-      fallback={<Chooser file={currentFile} setFile={setCurrentFile} />}
-    >
-      <button onclick={() => setCurrentFile(null)}>Back</button>
-      <Editor file={currentFile()!} />
-    </Show>
+    <div class="app">
+      <div class="navbar">
+        <Show when={currentFile() !== null}>
+          <button onclick={() => setCurrentFile(null)}>Back</button>
+        </Show>
+        <div class="title">{currentFile() ?? 'Choose a file'}</div>
+      </div>
+      <Show
+        when={currentFile()}
+        fallback={<Chooser file={currentFile} setFile={setCurrentFile} />}
+      >
+        <Editor file={currentFile()!} />
+      </Show>
+    </div>
   );
 }
 
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index c49594d..3ae96b5 100644
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -46,16 +46,9 @@ function Editor(props: EditorProps) {
   });
 
   return (
-    <div>
-      <p>You are editing {props.file}.</p>
-      <Show when={syncedDoc()}>
-        <div
-          ref={editorDiv}
-          class="editor-component"
-          style={{ border: '1px solid black' }}
-        />
-      </Show>
-    </div>
+    <Show when={syncedDoc()}>
+      <div ref={editorDiv} class="editor-component" />
+    </Show>
   );
 }