diff --git a/public/css/bootstrap.css b/public/css/bootstrap.css index a65ba1c..2681e39 100644 --- a/public/css/bootstrap.css +++ b/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, diff --git a/test/bootstrap-screen-layout.test.js b/test/bootstrap-screen-layout.test.js new file mode 100644 index 0000000..24a4d79 --- /dev/null +++ b/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/); +});