Using some styling to make the screen heights actually work out and update properly on window resize

ui/src/App.css

@@ -1,33 +1,5 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+#root {
+  position: absolute;
+  width: 100% !important;
+  height: 100% !important;
 }

ui/src/App.js

@@ -10,7 +10,8 @@ const App = () => {
       display: "flex",
       flexDirection: "column",
       justifyContent: "space-between",
-      height: "100vh",
+      height: "100%",
+      textAlign: "center",
     }}>
       <div>
         <p>TerrAssumptions!</p>