From f9e658e841e7dafc8b1b717316362bfcbfe2920b Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Mon, 1 Jun 2026 08:32:06 -0400
Subject: [PATCH] mobile: make play area fill screen width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 html/styles/stylesheet.css | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/html/styles/stylesheet.css b/html/styles/stylesheet.css
index 85294b5..90c1e30 100644
--- a/html/styles/stylesheet.css
+++ b/html/styles/stylesheet.css
@@ -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 */