enable scolling on small devices

public/css/bootstrap.css

@@ -9,28 +9,34 @@
   --bootstrap-error: #8b1e1e;
   --bootstrap-shadow: 0 1rem 3rem rgb(29 52 36 / 18%);
 }
-
 #bootstrap-screen {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: grid;
-  place-items: center;
+  align-items: safe center;
+  justify-items: center;
   min-height: 100svh;
+  box-sizing: border-box;
   padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
   color: var(--bootstrap-text);
   background:
     radial-gradient(circle at 20% 10%, rgb(135 185 112 / 32%), transparent 34rem),
     radial-gradient(circle at 85% 90%, rgb(230 198 116 / 25%), transparent 28rem),
     var(--bootstrap-bg);
 }
-
 #bootstrap-screen[hidden] {
   display: none;
 }
 
 #bootstrap-screen > section {
   width: min(100%, 34rem);
+  box-sizing: border-box;
   padding: clamp(1.25rem, 5vw, 2rem);
   border: 1px solid var(--bootstrap-border);
   border-radius: 1.5rem;
@@ -43,7 +49,6 @@
   margin-bottom: .25rem;
   font-size: 2rem;
 }
-
 #bootstrap-screen h1 {
   margin: 0 0 .5rem;
   font-size: clamp(1.8rem, 8vw, 2.5rem);
@@ -68,7 +73,6 @@
 #bootstrap-screen .privacy-summary > p {
   margin: 0;
 }
-
 #bootstrap-screen .privacy-summary > .switch-row.switch-disabled {
   display: none;
 }
@@ -91,7 +95,6 @@
   border-radius: 999px;
   background: var(--bootstrap-accent);
 }
-
 #bootstrap-screen progress::-moz-progress-bar {
   border-radius: 999px;
   background: var(--bootstrap-accent);
@@ -118,7 +121,6 @@
   color: var(--bootstrap-error);
   font-weight: 700;
 }
-
 #bootstrap-retry,
 #bootstrap-enter {
   width: 100%;
@@ -132,7 +134,6 @@
   font-weight: 700;
   cursor: pointer;
 }
-
 #bootstrap-retry:hover,
 #bootstrap-enter:hover,
 #bootstrap-retry:focus-visible,

test/bootstrap-screen-layout.test.js

@@ -0,0 +1,23 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import test from 'node:test';
+
+const root = path.resolve(import.meta.dirname, '..');
+
+async function read(relativePath) {
+  return fs.readFile(path.join(root, relativePath), 'utf8');
+}
+
+test('bootstrap screen remains vertically scrollable on small displays', async () => {
+  const css = await read('public/css/bootstrap.css');
+  const bootstrapRule = css.match(/#bootstrap-screen\s*\{([\s\S]*?)\}/)?.[1] ?? '';
+  const cardRule = css.match(/#bootstrap-screen\s*>\s*section\s*\{([\s\S]*?)\}/)?.[1] ?? '';
+
+  assert.match(bootstrapRule, /overflow-y:\s*auto/);
+  assert.match(bootstrapRule, /overflow-x:\s*hidden/);
+  assert.match(bootstrapRule, /touch-action:\s*pan-y/);
+  assert.match(bootstrapRule, /-webkit-overflow-scrolling:\s*touch/);
+  assert.match(bootstrapRule, /align-items:\s*safe center/);
+  assert.match(cardRule, /box-sizing:\s*border-box/);
+});