fix control bar position on mobile by containing scroll to the sheet area

Instead of letting body grow and scroll (which causes position:fixed bottom:0
to land at the document bottom on mobile), give html/body/app fixed heights
and scroll only the sheet container internally.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/resources/public/site.css

@@ -1,14 +1,40 @@
+html {
+  height: 100%;
+}
+
 body {
   font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
   max-width: 600px;
   margin: 0;
-  padding-bottom: 44px;
+  height: 100%;
+  overflow: hidden;
   -webkit-font-smoothing: antialiased;
   font-size: 1.125em;
   color: #333;
   line-height: 1.5em;
 }
 
+#app {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#main-layout {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.sheet-container {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+  padding-bottom: 44px;
+}
+
 h1, h2, h3 {
   color: #000;
 }

frontend/src/cljs/microtables_frontend/views.cljs

@@ -8,8 +8,8 @@
 (defn main-panel []
   (let [data (re-frame/subscribe [::subs/table-data])
         controls-state (re-frame/subscribe [::subs/controls-state])]
-    [:div
-     [sheet @data]
+    [:div#main-layout
+     [:div.sheet-container [sheet @data]]
      [control-panel @controls-state]]))