VARASYS/metronome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pm-mobile: fix landscape overlap — rework grid + tame tall buttons

Browse source 
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) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-06-07 16:58:17 -05:00
parent 185ed7736b
commit 2e57b4c507
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
mobile.html
View file

@ -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; }