From 2e57b4c507b9f08ba2c4ae4d096a9eeeed52e968 Mon Sep 17 00:00:00 2001 From: Me Here Date: Sun, 7 Jun 2026 16:58:17 -0500 Subject: [PATCH] =?UTF-8?q?pm-mobile:=20fix=20landscape=20overlap=20?= =?UTF-8?q?=E2=80=94=20rework=20grid=20+=20tame=20tall=20buttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The taller (min-height:66) transport buttons and the track-panel-in-the-left- column layout overflowed the short landscape viewport, causing sections to bleed into each other. - Landscape grid: left column is stage + transport again; the track panel now sits above the lanes in the right column (stage spans the two upper rows). - Reset .tbtn min-height to 0 in landscape and cap height to ~10vmin so the portrait 66px floor doesn't blow up the transport. Co-Authored-By: Claude Opus 4.8 (1M context) --- mobile.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/mobile.html b/mobile.html index 0d35a23..eecfebd 100644 --- a/mobile.html +++ b/mobile.html @@ -202,14 +202,14 @@ #top{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:8px 14px; } #topctl{ flex:1 1 320px; gap:8px; } #top .sels{ flex:2 1 320px; min-width:0; } - #mid{ display:grid; align-items:center; gap:8px 4vw; + #mid{ display:grid; align-items:stretch; gap:8px 4vw; padding-top:0; grid-template-columns:40% 60%; grid-template-rows:auto 1fr auto; - grid-template-areas:"panel detail" "stage detail" "transport detail"; } + grid-template-areas:"stage panel" "stage detail" "transport detail"; } #trackpanel{ grid-area:panel; align-self:start; } - #stage{ grid-area:stage; align-self:center; } + #stage{ grid-area:stage; align-self:center; justify-content:center; } #detail{ grid-area:detail; align-self:stretch; width:auto; max-width:none; max-height:none; min-height:0; overflow-y:auto; } #transport{ grid-area:transport; align-self:end; max-height:none; margin-top:0; } - .tbtn{ height:clamp(36px,11vmin,58px); } + .tbtn{ min-height:0; height:clamp(34px,10vmin,54px); } } [data-theme="light"] .logo-dark{ display:none; } [data-theme="dark"] .logo-light{ display:none; }