scope mobile scroll-containment to narrow screens via media query

The overflow:auto on .sheet-container was clipping horizontal content on
desktop. Gate the containment layout behind max-width:767px so wide screens
keep normal body-scroll (where position:fixed works without it).

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

frontend/resources/public/site.css

@@ -1,38 +1,39 @@
-html {
-  height: 100%;
-}
-
 body {
   font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
   max-width: 600px;
   margin: 0;
-  height: 100%;
-  overflow: hidden;
+  padding-bottom: 44px;
   -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;
+/* On narrow screens, contain scroll to the sheet area so position:fixed
+   stays anchored to the viewport rather than the document bottom. */
+@media (max-width: 767px) {
+  html, body {
+    height: 100%;
+    overflow: hidden;
+    padding-bottom: 0;
+  }
+  #app {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  #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 {