compact header, taller windows

app.js

@@ -406,7 +406,7 @@ function boot() {
   document.addEventListener('click', e => { $('#ctx').classList.remove('show'); document.querySelectorAll('.mitem.open').forEach(m => m.classList.remove('open')); if (!e.target.closest('#start')) $('#start').classList.remove('show'); });
   const tick = () => { $('#clock').textContent = new Date().toTimeString().slice(0, 5); }; tick(); setInterval(tick, 10000);
   $('#banner').textContent = t('replayBanner'); $('#banner').classList.add('show'); setTimeout(() => $('#banner').classList.remove('show'), 6000);
-  refreshTray(); renderDock(); { const tw = openApp('term'), gw = openApp('game'), DW = $('#desk').clientWidth - 110; if (!isPhone()) { const L = Math.min(230, $('#icons').offsetWidth + 30), half = Math.floor(($('#desk').clientWidth - L - 24 - ($('#arch') && $('#arch').offsetWidth ? 310 : 0)) / 2); tw.style.left = L + 'px'; tw.style.top = '40px'; tw.style.width = half + 'px'; gw.style.left = (L + 12 + half) + 'px'; gw.style.top = '40px'; gw.style.width = half + 'px'; } focusWin(tw); setTimeout(() => { const i = tw.querySelector('input'); if (i) i.focus(); }, 120); }
+  refreshTray(); renderDock(); { const tw = openApp('term'), gw = openApp('game'), DW = $('#desk').clientWidth - 110; if (!isPhone()) { const L = Math.min(230, $('#icons').offsetWidth + 30), half = Math.floor(($('#desk').clientWidth - L - 24 - ($('#arch') && $('#arch').offsetWidth ? 310 : 0)) / 2); tw.style.left = L + 'px'; tw.style.top = '40px'; tw.style.width = half + 'px'; gw.style.left = (L + 12 + half) + 'px'; gw.style.top = '40px'; gw.style.width = half + 'px'; const H = Math.max(360, $('#desk').clientHeight - 150) + 'px'; tw.style.height = H; gw.style.height = H; } focusWin(tw); setTimeout(() => { const i = tw.querySelector('input'); if (i) i.focus(); }, 120); }
   const sp = el('div', {id:'splash', role:'dialog', onclick:() => sp.remove()}, el('div', {class:'sp'}, el('div', {class:'spbar'}), ...copyNodes(), el('div', {class:'small muted', style:'margin-top:14px'}, t('booting'))));
   if (!new URLSearchParams(location.search).has('nosplash')) { document.body.append(sp); setTimeout(() => sp.remove(), 4500); }
   window.VK = {openApp, verifyChain};

styles.css

@@ -313,3 +313,13 @@ body{display:flex;flex-direction:column;height:100vh;height:100dvh}
 #arch .abar span{background:#fff;border:1px solid #E2E8F0;border-radius:999px;padding:2px 7px;font-weight:700;color:#4338CA}
 #arch .abar b{color:#0F172A;font-size:11px}
 @media (max-width:1100px){#arch{display:none}}
+
+/* compact header: give height to the desktop */
+#hdr{padding:6px 14px;gap:10px;row-gap:4px}
+#hdr .ht{display:flex;align-items:baseline;gap:12px;flex-wrap:nowrap;min-width:0}
+#hdr h1{font-size:15px;white-space:nowrap}
+#hdr .hq{margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
+#hdr .hd{display:none}
+#hdr #more,#hdr #langsw button{padding-top:4px;padding-bottom:4px;font-size:12px}
+#modelbar{margin-top:0}
+#modelbar .mrow{padding:2px 9px;font-size:11.5px}