diff --git a/mobile.html b/mobile.html index 6bf1bca..7af8ccc 100644 --- a/mobile.html +++ b/mobile.html @@ -68,7 +68,7 @@ .brandlogo{ height:clamp(21px,4.2vmin,30px); width:auto; display:block; } .hicons{ display:flex; align-items:center; gap:8px; margin-left:auto; } .hicons .icon{ width:36px; height:36px; font-size:16px; } - .sels{ display:flex; gap:8px; align-items:flex-end; } + .sels{ width:100%; display:flex; gap:8px; align-items:flex-end; } .sel{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; } .sel > span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-left:3px; } .sel select{ width:100%; background:var(--field-bg); color:var(--txt); border:1px solid var(--field-bd); border-radius:10px; padding:10px 8px; font-size:15px; } @@ -196,19 +196,17 @@ .tbtn.prac{ background:linear-gradient(180deg,#1c87b8,#136488); border-color:#1f9bd0; color:#eaf8ff; } .tbtn.prac.on{ background:linear-gradient(180deg,#c8922a,#9c6f12); border-color:#e0a93a; color:#fff; } - /* landscape (phone AND tablet — same layout, just scaled): 2-column grid — - pulse + transport on the left, panel + lanes on the right */ + /* landscape (phone AND tablet): header stays a full-width column (logo+icons + row, then volume row); the body becomes a 2-column grid — tempo + transport + on the left, selector + settings + lanes on the right */ @media (orientation:landscape){ #app{ --maxw:1060px; } - #top{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:8px 14px; } - #brandrow{ flex:1 1 100%; } - #top .vol{ flex:1 1 220px; width:auto; min-width:0; } - #top .sels{ flex:2 1 320px; min-width:0; } #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:"stage panel" "stage detail" "transport detail"; } - #trackpanel{ grid-area:panel; align-self:start; } + grid-template-columns:40% 60%; grid-template-rows:auto auto 1fr auto; + grid-template-areas:"stage sels" "stage panel" "stage detail" "transport detail"; } #stage{ grid-area:stage; align-self:center; justify-content:center; } + .sels{ grid-area:sels; align-self:start; } + #trackpanel{ grid-area:panel; align-self:start; } #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{ min-height:0; height:clamp(34px,10vmin,54px); } @@ -276,14 +274,23 @@