From b8db78542296b5e3c3a3cbe65fdb748482f1d60e Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Wed, 29 Apr 2026 00:18:07 +0700
Subject: [PATCH] fix(mobile): claw back vertical/horizontal space in landscape
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tighten everything that fights the board for pixels in landscape:

- #app top padding 12 -> 6 (saves 6px vertical).
- .game gap 10 -> 6 (saves 4px between HUD and board).
- D-pad arrows 48 -> 44px and action button height 48 -> 44px (still
  above the 44pt HIG minimum). Dock width shrinks 160 -> 150px and
  internal d-pad height 102 -> 94px.
- Dock now justify-content: flex-end so the action stack and d-pad
  cluster at the bottom of the column (natural thumb arc), leaving
  empty space above instead of mid-column.

computeTileSize landscape branch: chromeY 76 -> 64, chromeX
240 -> 186 to match the slimmer chrome reservation. Net board win on
800x360 phones: ~47 -> 50 tile (+6%); on Pixel 7 landscape Microban 1
already hits the 56px cap and stays there. Tall puzzles still bound
by viewport height — no CSS-only path past that without scroll.

All changes gated behind @media (pointer: coarse) and (orientation:
landscape). Portrait and desktop untouched.
---
 src/app.css                     |  6 ++++++
 src/views/GameView.svelte       | 14 +++++++++-----
 src/views/MobileControls.svelte | 30 +++++++++++++++++++++---------
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/src/app.css b/src/app.css
index 9fd5374..b4b19d3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -72,6 +72,12 @@ body {
     #app { padding: 12px 12px 0; }
 }
 
+/* Landscape phones get even tighter top padding so the board has more
+   vertical room (every px counts when the viewport is only ~360-412 tall). */
+@media (pointer: coarse) and (orientation: landscape) {
+    #app { padding: 6px 12px 0; }
+}
+
 button {
     font-family: inherit;
     touch-action: manipulation;
diff --git a/src/views/GameView.svelte b/src/views/GameView.svelte
index 7305e99..d1ead13 100644
--- a/src/views/GameView.svelte
+++ b/src/views/GameView.svelte
@@ -52,8 +52,11 @@
         //   desktop           : HUD only.
         let chromeY, chromeX;
         if (isCoarse && isLandscape) {
-            chromeY = 76;
-            chromeX = 80 + 160; // base + side dock width
+            // Landscape side-by-side: tighter app padding (6 top), tighter
+            // .game gap (6), HUD ~52 → 64 vertical chrome. Dock column 150px
+            // + 12 gap + 24 lateral = 186 horizontal chrome.
+            chromeY = 64;
+            chromeX = 24 + 150 + 12;
         } else if (isCoarse) {
             chromeY = 295;
             chromeX = 80;
@@ -326,10 +329,11 @@
 
     /* Landscape phones: flip .play-group to a row so the dock occupies a
        narrow right column instead of stacking below the board. Lets the board
-       claim the full vertical viewport (minus HUD), 3x the tile size on most
-       Microban levels. Drop the portrait upward-bias padding — the row layout
-       fills space differently. */
+       claim the full vertical viewport (minus HUD), ~3x the tile size on most
+       Microban levels. Tighter .game gap and #app top padding (see app.css)
+       claw back ~10 more vertical px for the board. */
     @media (pointer: coarse) and (orientation: landscape) {
+        .game { gap: 6px; }
         .play-stack { padding-bottom: 0; }
 
         .play-group {
diff --git a/src/views/MobileControls.svelte b/src/views/MobileControls.svelte
index 5793caa..c37fd99 100644
--- a/src/views/MobileControls.svelte
+++ b/src/views/MobileControls.svelte
@@ -158,15 +158,16 @@
         .action { height: 48px; }
     }
 
-    /* Landscape phones: dock becomes a narrow right column. Action stack
-       sits at the top, d-pad at the bottom so the arrows land in the
-       natural thumb arc for a two-handed grip. */
+    /* Landscape phones: dock becomes a narrow right column anchored to the
+       bottom (thumb arc for two-handed grip). Smaller arrows (44 vs 48 in
+       portrait) shrink the dock from 160 -> 150 wide and 102 -> 94 tall, so
+       the board can claim more horizontal real estate. */
     @media (pointer: coarse) and (orientation: landscape) {
         .mobile-dock {
             flex-direction: column;
-            justify-content: space-between;
+            justify-content: flex-end;
             align-items: center;
-            width: 160px;
+            width: 150px;
             gap: 12px;
             padding:
                 12px
@@ -175,10 +176,21 @@
                 8px;
         }
 
-        /* Override portrait's align-self: flex-start; in column layout the
-           cross axis is horizontal and we want the d-pad centered. */
-        .dpad { align-self: center; }
-        .dock-left { align-self: center; }
+        /* Override portrait's align-self: flex-start; column layout's cross
+           axis is horizontal — center both stacks. */
+        .dpad {
+            align-self: center;
+            grid-template-columns: 44px 44px 44px;
+            grid-template-rows: 44px 44px;
+            gap: 6px;
+        }
+
+        .dock-left {
+            align-self: center;
+            grid-auto-rows: 44px;
+        }
+
+        .action { height: 44px; }
     }
 
     /* Global `button` rules (touch-action, tap-highlight) live in app.css. */