fix: prevent page overflow beneath footer (#199)

Author: ZFordDev

scripts/bundle.js

@@ -1,8 +1,9 @@
 const esbuild = require("esbuild");
+const path = require("path");
 
 esbuild.build({
-  entryPoints: ["src/scripts.js"],
+  entryPoints: [path.join(__dirname, "..", "src", "scripts.js")],
   bundle: true,
-  outfile: "dist/bundle.js",
+  outfile: path.join(__dirname, "..", "dist", "bundle.js"),
   platform: "browser",
-}).catch(() => process.exit(1));
+}).catch(() => process.exit(1));

src/styles/components/workarea.css

@@ -14,11 +14,13 @@
   position: relative;
   width: 80%;
   max-width: 900px;
-  height: calc(100vh - 120px);
+  /* Size against the flex-managed app container so the footer and header are
+     always accounted for, regardless of window size or toolbar height. */
+  height: 100%;
   background: var(--editor-bg);
   color: var(--editor-text);
   display: flex;
   flex-direction: column;
   min-height: 0;
   overflow: hidden; /* bubble never scrolls */
-}
+}