Occupy the entire viewport

document-authoring.js

@@ -1,19 +1,21 @@
 // Initialize the app container.
 const app = document.getElementById('app');
 app.innerHTML = `
-  <div style="max-width: 1024px; margin: 0 auto; padding: 20px;">
-    <div id="statusIndicator">
-      <span class="spinner"></span> Services starting...
+  <div style="height: 100vh; display: flex; flex-direction: column;">
+    <div style="padding: 20px;">
+      <div id="statusIndicator">
+        <span class="spinner"></span> Services starting...
+      </div>
+      <div id="translationControls">
+        <select id="languageSelect">
+          <option value="Spanish">Spanish</option>
+          <option value="French">French</option>
+          <option value="German">German</option>
+        </select>
+        <button id="translateButton">Translate Document</button>
+      </div>
     </div>
-    <div id="translationControls">
-      <select id="languageSelect">
-        <option value="Spanish">Spanish</option>
-        <option value="French">French</option>
-        <option value="German">German</option>
-      </select>
-      <button id="translateButton">Translate Document</button>
-    </div>
-    <div id="editor" style="border: 1px solid black; height: 600px; position: relative"></div>
+    <div id="editor" style="flex: 1; border: 1px solid black; min-height: 0;"></div>
   </div>
 `;
 

index.html

@@ -6,6 +6,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document Authoring SDK</title>
     <style>
+      /* Reset default margins and padding */
+      html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      #app {
+        height: 100%;
+      }
+
       .spinner {
         display: inline-block;
         width: 16px;
@@ -39,9 +51,9 @@
 
       #statusIndicator {
         text-align: center;
-        padding: 20px;
+        padding: 10px;
         background: #f0f0f0;
-        margin-bottom: 20px;
+        margin-bottom: 10px;
         border-radius: 4px;
         font-size: 16px;
       }