From 4164097893a7468d282815d7ccfcb6c75c8abe4f Mon Sep 17 00:00:00 2001
From: Uladzimir Karpenka <i@vladimir.cc>
Date: Thu, 14 May 2026 21:17:54 +0300
Subject: [PATCH] Improve mobile web remote layout

---
 WebPageHtml.pas | 43 ++++++++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/WebPageHtml.pas b/WebPageHtml.pas
index b84a4af..617b91a 100644
--- a/WebPageHtml.pas
+++ b/WebPageHtml.pas
@@ -98,34 +98,47 @@ begin
     '.sbar{flex:0 0 16px;display:flex;align-items:center;padding:0 6px;gap:10px;background:#0e0e0e;border-top:1px solid #222;font-size:10px;color:#555}' +
     '#latEl{margin-left:auto}' +
     '@media screen and (max-width:640px){' +
-    // Тулбар 1: горизонтальный скролл вместо переноса
-    '.tbar:not(.row2){overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}' +
-    '.tbar:not(.row2)::-webkit-scrollbar{display:none;}' +
+    'body{overflow:auto;height:auto;min-height:100vh;}' +
+    '.wrap{height:auto;min-height:100vh;padding:3px;}' +
+    // Тулбар 1: переносим группы по строкам, чтобы не было скрытых контролов
+    '.tbar:not(.row2){height:auto;min-height:32px;flex-wrap:wrap;align-items:center;overflow:visible;padding:4px;gap:4px;}' +
     '.tbar:not(.row2)>*{flex-shrink:0;}' +
+    '.tbar:not(.row2) .tsep,.tbar:not(.row2) .sl-sep{display:none;}' +
+    '.sl-g{height:30px;}' +
+    '.sl-val{min-width:2.8em;}' +
     // Крупнее зоны касания
     'button{height:30px;}select{height:30px;}' +
     // VFO-строка: стекаем smeter / vfo-mid / right-g каждый на своей строке
-    '.row2{height:auto;flex-wrap:wrap;padding:3px;gap:3px;}' +
+    '.row2{height:auto;flex-wrap:wrap;padding:4px;gap:4px;}' +
     '#smeter{width:100%;height:40px;}' +
-    '.vfo-mid{width:100%;gap:2px;justify-content:flex-start;}' +
-    '.vfo-ro{font-size:20px;height:34px;padding:0 2px;padding-top:6px;}' +
-    '.vfo-ro .dg,.vfo-ro .sp{font-size:20px;}' +
-    '.vfo-hz .dg{font-size:10px;}' +
-    '.vbtn{width:26px;height:26px;font-size:10px;}' +
-    '.swap-g button{height:22px;padding:0 4px;font-size:9px;}' +
+    '.vfo-mid{width:100%;display:grid;grid-template-columns:24px minmax(0,1fr) auto 24px minmax(0,1fr);gap:3px;align-items:center;}' +
+    '#vBtnA{grid-column:1;grid-row:1;}#vDispA{grid-column:2;grid-row:1;}' +
+    '.swap-g{grid-column:3;grid-row:1;justify-content:center;gap:2px;}' +
+    '#vBtnB{grid-column:4;grid-row:1;}#vDispB{grid-column:5;grid-row:1;}' +
+    '.vfo-ro{width:100%;font-size:16px;height:30px;padding:0 1px;padding-top:6px;justify-content:flex-start;}' +
+    '.vfo-ro .dg,.vfo-ro .sp{font-size:16px;}' +
+    '.vfo-hz .dg{font-size:8px;}' +
+    '.vbtn{width:24px;height:24px;font-size:10px;}' +
+    '.swap-g button{height:22px;padding:0 3px;font-size:8px;min-width:30px;}' +
     '.vfo-sp{display:none;}' +
-    '.right-g{width:100%;margin-left:0;}' +
-    '.right-g button,.right-g select{height:28px;font-size:11px;}' +
+    '.right-g{width:100%;margin-left:0;display:grid;grid-template-columns:58px minmax(0,1fr) 52px;gap:4px;}' +
+    '.right-g button,.right-g select{height:30px;font-size:11px;width:100%;min-width:0;}' +
+    '#bandSel{min-width:0;}' +
+    '.span-ov{right:4px;overflow-x:auto;scrollbar-width:none;}' +
+    '.span-ov::-webkit-scrollbar{display:none;}' +
+    '.sp-btn{flex:0 0 auto;height:22px;padding:0 6px;}' +
+    '.spec-area{min-height:130px;flex:0 0 30vh;}' +
+    '.ruler-area{flex:0 0 22px;}' +
     // Водопад короче на телефоне
-    '.wf-area{flex:0 0 180px;}' +
+    '.wf-area{flex:0 0 32vh;min-height:150px;}' +
     // Слайдеры чуть уже
-    'input[type=range]{width:55px;}' +
+    'input[type=range]{width:64px;}' +
     // TX+MOX пинним в начало тулбара чтобы были видны без скролла
     '#toneBtn{order:-3;}'  +
     '.tx-g{order:-2;}'     +
     '#moxBtn{order:-1;min-width:52px;height:30px;font-weight:bold;}' +
     // iOS Safari: 100vh включает адресную строку — используем реальную высоту
-    'body,.wrap{height:-webkit-fill-available;}' +
+    'body,.wrap{min-height:-webkit-fill-available;}' +
     '}' +
     '</style></head>' +