Make the editor use the remaining page height

index.html

@@ -17,7 +17,7 @@
         <button id="back-button" data-i18n>Back</button>
         <a id="controls-button" class="button open-modal" href="#controls" data-i18n>Controls</a>
       </div>
-      <div class="input">
+      <div class="input current-word">
         <input type="text" id="word-input" autocapitalize="off" spellcheck="false" />
         <div id="light"></div>
       </div>

src/editor/GraphEditor.ts

@@ -464,6 +464,14 @@ export class GraphEditor extends HTMLElement {
   private fireOnChange() {
     this.dispatchEvent(new Event('change'));
   }
+
+  override get clientWidth(): number {
+    return this.children[0].clientWidth;
+  }
+
+  override get clientHeight(): number {
+    return this.children[0].clientHeight;
+  }
 }
 
 type NodeSelection = d3.Selection<

src/style.css

@@ -24,10 +24,13 @@ h1 {
 }
 
 #app {
-  max-width: 1280px;
+  display: flex;
-  margin: 0 auto;
+  flex-direction: column;
-  padding: 2rem;
+  min-height: 100vh;
-  text-align: center;
+}
+
+#app[hidden] {
+  display: none;
 }
 
 .input {
@@ -36,6 +39,9 @@ h1 {
   justify-content: center;
   margin-bottom: 0.5em;
 }
+.current-word {
+  padding-top: 2rem;
+}
 input {
   padding: 0.3em 0.5em;
   font-size: 1.1em;
@@ -108,9 +114,8 @@ button:focus-visible {
   background-color: #3a3a3a;
 }
 
-graph-editor {
+#state-graph {
-  display: block;
+  flex-grow: 1;
-  height: 600px;
 }
 
 .link {