Fix size of CodeMirror to available viewport

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%;
+}

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')!;
 

src/components/App.tsx

@@ -6,13 +6,20 @@ function App() {
   const [currentFile, setCurrentFile] = createSignal<string | null>(null);
 
   return (
-    <Show
+    <div class="app">
-      when={currentFile()}
+      <div class="navbar">
-      fallback={<Chooser file={currentFile} setFile={setCurrentFile} />}
+        <Show when={currentFile() !== null}>
-    >
+          <button onclick={() => setCurrentFile(null)}>Back</button>
-      <button onclick={() => setCurrentFile(null)}>Back</button>
+        </Show>
-      <Editor file={currentFile()!} />
+        <div class="title">{currentFile() ?? 'Choose a file'}</div>
-    </Show>
+      </div>
+      <Show
+        when={currentFile()}
+        fallback={<Chooser file={currentFile} setFile={setCurrentFile} />}
+      >
+        <Editor file={currentFile()!} />
+      </Show>
+    </div>
   );
 }
 

src/components/Editor.tsx

@@ -46,16 +46,9 @@ function Editor(props: EditorProps) {
   });
 
   return (
-    <div>
+    <Show when={syncedDoc()}>
-      <p>You are editing {props.file}.</p>
+      <div ref={editorDiv} class="editor-component" />
-      <Show when={syncedDoc()}>
+    </Show>
-        <div
-          ref={editorDiv}
-          class="editor-component"
-          style={{ border: '1px solid black' }}
-        />
-      </Show>
-    </div>
   );
 }