From 179f052c89346e1431c39984cb32d3d55d6186a7 Mon Sep 17 00:00:00 2001 From: tiennm99 Date: Tue, 28 Apr 2026 23:36:53 +0700 Subject: [PATCH] fix(mobile): align LVLS button with d-pad's bottom arrow row Restructure .dock-left from a 3-button column-flex into a 2x2 grid: UNDO and RESET share the top row, LVLS spans the full bottom row via grid-column: 1 / -1. Both columns now share 48px row heights and a 6px gap so UNDO/RESET line up with UP and LVLS lines up with the LEFT/DOWN/RIGHT row. Bump .action height 44 -> 48px on coarse pointers so action rows match the d-pad's 48px arrows. Still well above the 44pt HIG minimum. With the action stack now equal to the d-pad's natural height (102px), the dock no longer needs the previous round's asymmetric flex-end layout to look balanced. --- src/views/MobileControls.svelte | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/views/MobileControls.svelte b/src/views/MobileControls.svelte index dc1e100..845c9a4 100644 --- a/src/views/MobileControls.svelte +++ b/src/views/MobileControls.svelte @@ -125,11 +125,21 @@ box-sizing: border-box; } + /* Action buttons mirror the d-pad as a 2-row grid: + row 1: UNDO + RESET (matches UP row) + row 2: LVLS spans both columns (matches LEFT/DOWN/RIGHT row) + Both columns share the same row heights / gap so action and arrow + rows line up on the same Y. */ .dock-left { - display: flex; - flex-direction: column; - justify-content: flex-end; - gap: 8px; + display: grid; + grid-template-columns: auto auto; + grid-auto-rows: 48px; + gap: 6px; + align-self: flex-start; + } + + .dock-left .action:nth-child(3) { + grid-column: 1 / -1; } .dpad { @@ -142,6 +152,10 @@ gap: 6px; align-self: flex-start; } + + /* Match arrow height for grid-row alignment between action stack + and d-pad. Still well above the 44pt HIG minimum. */ + .action { height: 48px; } } /* Global `button` rules (touch-action, tap-highlight) live in app.css. */