diff --git a/style.css b/style.css index 00a2019..6a96512 100644 --- a/style.css +++ b/style.css @@ -251,6 +251,9 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins #rotate { display: none; padding: 1em; text-align: center; color: var(--dim); } @media (orientation: portrait) and (max-width: 700px) { #rotate { display: block; } } +/* Telefono in verticale: la scena è bassa e la Pausa non ci sta. Prende tutto lo schermo, così il cursore, i pulsanti, + la spiegazione e la versione non finiscono sopra i verbi. */ +@media (orientation: portrait) and (max-width: 700px) { #pause { position: fixed; inset: 0; z-index: 10; overflow-y: auto; background: rgba(15, 10, 20, .97); } } /* Schermi stretti: il carattere a pixel è largo, i verbi vanno sopra l'inventario e su due righe da quattro. */ @media (max-width: 600px) { #panel { grid-template-columns: 1fr; gap: 6px; padding: 6px; } diff --git a/tests/browser.mjs b/tests/browser.mjs index 30698ad..6b76461 100644 --- a/tests/browser.mjs +++ b/tests/browser.mjs @@ -416,6 +416,23 @@ try { await small.click('#pause-button'); assert.ok(await small.evaluate(() => document.getElementById('to-title').getBoundingClientRect().bottom <= document.getElementById('stage').getBoundingClientRect().bottom), 'la pausa esce dalla scena'); await small.screenshot({ path: `${OUT}/08b-telefono-stretto-pausa.png` }); + // Telefono in verticale: la Pausa prende tutto lo schermo, e versione e spiegazione non finiscono sopra i verbi. + { + const tall = await browser.newPage({ viewport: { width: 412, height: 915 }, deviceScaleFactor: 2, hasTouch: true, isMobile: true }); + await tall.goto(`http://127.0.0.1:${PORT}/`); + await tall.waitForSelector('#splash', { state: 'hidden', timeout: 15000 }); + await tall.click('#new-game'); + await tall.click('#rione [data-rione="campomigliaio"]'); + await tall.click('#skip-intro'); + await settle(tall); + await tall.click('#pause-button'); + const fit = await tall.evaluate(() => { + const p = document.getElementById('pause'), v = p.querySelector('.version').getBoundingClientRect(); + return { inside: p.scrollHeight <= p.clientHeight + 1, top: document.elementFromPoint(v.x + v.width / 2, v.y + v.height / 2)?.closest('#pause') !== null }; + }); + assert.deepEqual(fit, { inside: true, top: true }, 'in verticale la pausa esce dallo schermo o finisce sotto i verbi'); + await tall.close(); + } const landscape = await open({ width: 844, height: 390 }); await landscape.click('#new-game'); await landscape.click('#rione [data-rione="campomigliaio"]');