new gpr

python_app/webui/static/style.css

@@ -318,14 +318,35 @@ body {
 }
 .toast.error { background: var(--danger); }
 
-/* Narrow screens / phones: stack the plot above the settings, full-width controls. */
+/* Narrow screens / phones: stack the plot above the settings, full-width controls,
+   and let the whole page scroll instead of clipping the settings panel. */
 @media (max-width: 760px) {
+  /* Let the whole page scroll normally instead of clipping to the viewport. */
+  html, body {
+    height: auto;
+    overflow: visible;
+  }
+  body { min-height: 100vh; } /* Still fill the screen when content is short. */
+
   .topbar { flex-wrap: wrap; }
   .controls { width: 100%; }
   .controls .btn { flex: 1 1 auto; }
-  .layout { flex-direction: column; padding: 10px; gap: 10px; }
+
+  .layout {
+    flex: none;            /* Size to content instead of stretching to the viewport. */
+    flex-direction: column;
+    padding: 10px;
+    gap: 10px;
+  }
   .plot-panel { flex: none; height: 45vh; }
-  .side-panel { width: auto; flex: 1; min-height: 0; }
+
+  .side-panel {
+    width: auto;
+    flex: none;            /* Expand to the full height of its content. */
+  }
+  .panel-body { overflow: visible; }        /* Do not clip the settings. */
+  .settings-fields { overflow-y: visible; } /* Scroll the page, not an inner box. */
+
   .field input[type="text"],
   .field input[type="number"],
   .field select { width: 130px; }