github-such-software/wownerogue
1
0
Fork 0
mirror of https://github.com/Such-Software/wownerogue.git synced 2026-10-17 22:31:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

mobile: make play area fill screen width

Browse Source 
On phones the dungeon canvas was letterboxed: the game grid row was 1fr and
got squeezed by the status bar + chat, so the 800x608 canvas scaled to that
short height and rendered narrow with black side bars.

Drive the game area by width instead — full-width box with the canvas's own
aspect ratio (auto height) — and hand the leftover vertical space to chat
(now 1fr, max-height cap removed) so it's roomier too.
This commit is contained in:
jwinterm
2026-06-01 08:32:06 -04:00
parent db5ed2e8aa
commit f9e658e841
1 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/styles/stylesheet.css
+25 -3
View File
@@ -320,7 +320,11 @@ li.debug {
#touch-dpad { display: none; }
@media (max-width: 820px) {
/* Stack the desktop 3-column grid into a single column */
/* Stack the desktop 3-column grid into a single column.
Rows: header / status / game / CHAT(flex) / input / footer.
The game row is `auto` (sized by the canvas's own aspect ratio at full width)
and the CHAT row takes the leftover space (1fr) instead — so the play area fills
the screen width and chat gets whatever height remains. */
.container {
grid-template-areas:
"header"
@@ -330,11 +334,28 @@ li.debug {
"input"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto auto auto;
grid-template-rows: auto auto auto 1fr auto auto;
height: 100vh;
height: 100dvh; /* exclude mobile browser chrome where supported */
}
/* Game area: full width, height follows the 800x608 (25x19 tile) canvas ratio.
This makes the dungeon fill the screen width instead of being letterboxed by a
short, height-constrained grid row. The canvas fills the box exactly. */
.rotdis {
grid-area: game;
width: 100%;
aspect-ratio: 800 / 608;
height: auto;
min-height: 0;
box-sizing: border-box;
border-width: 1px;
}
.rotdis canvas {
width: 100% !important;
height: 100% !important;
}
.banner { font-size: 16px; padding: 4px 6px; }
#staticbanner { font-size: 15px !important; }
.status {
@@ -346,8 +367,9 @@ li.debug {
padding: 6px 8px;
font-size: 12px;
}
/* Chat fills the leftover vertical space and scrolls internally. */
.chat-container { min-height: 0; }
#messageBox { max-height: 16vh; }
#messageBox { max-height: none; height: 100%; }
.footer { font-size: 9px; padding: 2px 4px; line-height: 1.3; }
/* Fixed-width modals would overflow tiny screens — make them fit */