collin/mahjong · 1c51666e
Nothing on the lobby falls off the edges
Collin Richards · 2026-08-25 08:35 UTC · 1c51666ea8f3f91b39d2b3ce3436a6eaadecfd4f · parent 65869214 · browse files
modifiedsrc/styles.css+51 −1
| ⋯ 105 unchanged lines | |||
| 106 | 106 | display: flex; | |
| 107 | 107 | flex-direction: column; | |
| 108 | 108 | align-items: center; | |
| 109 | - | justify-content: center; | |
| 109 | + | /* Centred while the whole lobby fits, and pinned to the top the moment it | |
| 110 | + | does not. Plain `center` spills equally out of both ends of a short window, | |
| 111 | + | and the half that goes off the top is cut away with no scroll that reaches | |
| 112 | + | it: the title was losing its lower stroke and the settings row was falling | |
| 113 | + | off the bottom on any laptop window under about 800px. `safe` keeps the | |
| 114 | + | overflow on the end you can actually scroll to. */ | |
| 115 | + | justify-content: safe center; | |
| 116 | + | overflow-y: auto; | |
| 117 | + | padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); | |
| 110 | 118 | gap: 0.5rem; | |
| 111 | 119 | background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-2) 75%); | |
| 112 | 120 | } | |
| 121 | + | /* Nothing in here gives up height to fit. A squeezed button is a button with | |
| 122 | + | its own two lines of text crushed inside it, which is the cut-off text the | |
| 123 | + | scroll is here to avoid. */ | |
| 124 | + | .lobby > * { | |
| 125 | + | flex: none; | |
| 126 | + | } | |
| 113 | 127 | .lobby h1 { | |
| 114 | 128 | font-size: clamp(3rem, 9vw, 7rem); | |
| 115 | 129 | font-weight: 900; | |
| ⋯ 1175 unchanged lines | |||
| 1291 | 1305 | opacity: 0.72; | |
| 1292 | 1306 | } | |
| 1293 | 1307 | ||
| 1308 | + | /* A window with the width for the table but not the height for the lobby. The | |
| 1309 | + | compact layout does not start until 620px tall, so a 700px laptop window got | |
| 1310 | + | the full-size lobby: a 112px title, a saved game, four ways to start and the | |
| 1311 | + | settings row, which comes to more than the window has. Everything gives a | |
| 1312 | + | little, the same way the compact rules give, so the last of it lands above | |
| 1313 | + | the fold rather than behind a scroll nobody goes looking for. | |
| 1314 | + | ||
| 1315 | + | The title is the first to go, because it is the one thing sized off width | |
| 1316 | + | alone: 9vw of a wide short window is a title taller than a button. */ | |
| 1317 | + | @media (max-height: 860px) { | |
| 1318 | + | .lobby { | |
| 1319 | + | gap: 0.25rem; | |
| 1320 | + | } | |
| 1321 | + | .lobby h1 { | |
| 1322 | + | font-size: clamp(2.4rem, min(9vw, 10vh), 7rem); | |
| 1323 | + | margin-bottom: 0.2rem; | |
| 1324 | + | } | |
| 1325 | + | .resume { | |
| 1326 | + | margin-top: 0.8rem; | |
| 1327 | + | padding: 8px 20px; | |
| 1328 | + | } | |
| 1329 | + | .lobby .hint { | |
| 1330 | + | margin-bottom: 0.6rem; | |
| 1331 | + | } | |
| 1332 | + | .lobby-buttons { | |
| 1333 | + | margin-top: 0.9rem; | |
| 1334 | + | gap: 8px; | |
| 1335 | + | } | |
| 1336 | + | .lobby-buttons .big-btn { | |
| 1337 | + | padding: 7px 28px; | |
| 1338 | + | } | |
| 1339 | + | .lobby-extras { | |
| 1340 | + | margin-top: 0.8rem; | |
| 1341 | + | } | |
| 1342 | + | } | |
| 1343 | + | ||
| 1294 | 1344 | /* ---------- sound ---------- */ | |
| 1295 | 1345 | .lobby-extras { | |
| 1296 | 1346 | margin-top: 1.4rem; | |
| ⋯ 1311 unchanged lines | |||