From 2415015a87ffe2ec73275fc743a424f3682b2984 Mon Sep 17 00:00:00 2001
From: d00f <8052722+DrDoof@users.noreply.github.com>
Date: Tue, 13 Oct 2026 05:03:50 +0200
Subject: [PATCH 1/2] web: keep the port strip in the header on every tab

The row of port icons lived in a card on the Dashboard, so link
state and speed were out of sight on every other tab. Move it into the
header between the title and the save button, a little smaller, and
poll /status.json whenever the page is open instead of only on the
Dashboard, Ports and Statistics tabs; the existing idle and hidden-tab
gating still pauses it. On narrow screens the strip wraps to its own
row under the title.
---
 html/app.js     | 10 ++++------
 html/index.html | 27 +++++++++++++--------------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/html/app.js b/html/app.js
index 3d499b38..13cc938f 100644
--- a/html/app.js
+++ b/html/app.js
@@ -964,6 +964,7 @@ function pollStatus(){
   });
 }
 var statusPoller=new Poller(pollStatus,2500);
+statusPoller.start();
 function needPorts(fn){
   if(S.n)return fn();
   pollStatus().then(fn).catch(function(){});
@@ -1108,8 +1109,7 @@ function dashStatus(){
   });
 }
 tabHooks.dash={
-  enter:function(){statusPoller.start();pollInfo().catch(function(){})},
-  leave:function(){statusPoller.stop()},
+  enter:function(){pollInfo().catch(function(){})},
   status:dashStatus,
 };
 
@@ -1186,8 +1186,7 @@ function applyPort(i){
   postCmds(cmds).then(loadMtu).catch(function(){});
 }
 tabHooks.ports={
-  enter:function(){statusPoller.start();needPorts(buildPorts)},
-  leave:function(){statusPoller.stop()},
+  enter:function(){needPorts(buildPorts)},
   status:portsStatus,
 };
 
@@ -1443,8 +1442,7 @@ function statsStatus(){
   });
 }
 tabHooks.stats={
-  enter:function(){statusPoller.start()},
-  leave:function(){statusPoller.stop();if(ctrPoll)ctrPoll.stop()},
+  leave:function(){if(ctrPoll)ctrPoll.stop()},
   status:statsStatus,
 };
 
diff --git a/html/index.html b/html/index.html
index 9b14660b..a0e24ef7 100644
--- a/html/index.html
+++ b/html/index.html
@@ -55,11 +55,11 @@ a{color:var(--ac);text-decoration:none}
 #navfoot{padding:10px 16px;border-top:1px solid var(--bd);font-size:12px;color:var(--fg2)}
 #wrap{flex:1;min-width:0;display:flex;flex-direction:column}
 #top{
-  display:flex;align-items:center;gap:10px;padding:10px 20px;
+  display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 20px;
   background:var(--panel);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:5;
 }
 #burger{display:none;background:none;border:0;cursor:pointer;padding:4px}
-#ttitle{font-size:16px;font-weight:650;flex:1}
+#ttitle{font-size:16px;font-weight:650;min-width:120px}
 #dirty{
   display:none;font-size:12px;font-weight:600;color:var(--warn);
   border:1px solid var(--warn);border-radius:20px;padding:2px 10px;
@@ -112,19 +112,19 @@ label.row span.lb{width:110px;flex:none;color:var(--fg2);font-size:13px}
 }
 .switch input:checked+i{background:var(--ok)}
 .switch input:checked+i:before{transform:translateX(15px)}
-#strip{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 2px}
+#strip{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:center;min-width:0}
 .port{
-  width:46px;border:2px solid var(--bd);border-radius:7px;padding:5px 0 3px;
+  width:40px;border:2px solid var(--bd);border-radius:7px;padding:3px 0 2px;
   text-align:center;cursor:pointer;background:var(--panel2);position:relative;
 }
-.port.sfp{width:56px}
-.port .pn{font-weight:650;font-size:13px}
-.port .ps{font-size:10px;color:var(--fg2);display:block;line-height:1.2}
+.port.sfp{width:50px}
+.port .pn{font-weight:650;font-size:12px}
+.port .ps{font-size:9px;color:var(--fg2);display:block;line-height:1.2}
 .port .jack{
-  display:block;width:18px;height:12px;margin:3px auto 2px;border-radius:2px;
-  border:2px solid var(--fg2);border-top-width:5px;opacity:.55;
+  display:block;width:16px;height:10px;margin:2px auto 1px;border-radius:2px;
+  border:2px solid var(--fg2);border-top-width:4px;opacity:.55;
 }
-.port.sfp .jack{width:28px;height:10px;border-top-width:3px}
+.port.sfp .jack{width:24px;height:9px;border-top-width:3px}
 .port.up{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 10%,var(--panel2))}
 .port.up .jack{border-color:var(--pc);opacity:1}
 .port.up .ps{color:var(--pc);font-weight:600}
@@ -180,7 +180,8 @@ button.danger{background:var(--bad);color:#fff;border-color:transparent}
   #burger{display:block}
   main{padding:14px 12px 40px}
   #top{padding:8px 10px;gap:7px}
-  #ttitle{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  #ttitle{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
+  #strip{order:3;flex-basis:100%;justify-content:flex-start}
   #dirty{padding:2px 7px}
 }
 </style>
@@ -215,15 +216,13 @@ button.danger{background:var(--bad);color:#fff;border-color:transparent}
       <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--fg)" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
     </button>
     <span id="ttitle"></span>
+    <div id="strip" data-i18n-t="d_ports_h"></div>
     <span id="dirty" data-i18n="hdr_dirty" data-i18n-t="hdr_dirty_t">unsaved changes</span>
     <button class="ctl pri" id="saveBtn" data-i18n="hdr_save" data-i18n-t="hdr_save_t">Save to flash</button>
   </header>
 
   <main>
     <section class="tab act" id="tab-dash">
-      <div class="card"><h2><span data-i18n="d_ports">Ports</span> <span class="hint" data-i18n="d_ports_h">click a port for details</span></h2>
-        <div id="strip"></div>
-      </div>
       <div class="grid2">
         <div class="card"><h2 data-i18n="d_system">System</h2><table class="t" id="sysinfo"></table></div>
         <div class="card"><h2><span data-i18n="d_traffic">Traffic</span> <span class="hint" data-i18n="d_traffic_h">packets/s, live</span></h2>

From 6fad2836aef03c1fe6548f6b913b544f304bb3e6 Mon Sep 17 00:00:00 2001
From: d00f <8052722+DrDoof@users.noreply.github.com>
Date: Fri, 16 Oct 2026 18:47:26 +0200
Subject: [PATCH 2/2] web: keep the port strip on one row

The strip no longer wraps. Ports shrink to fit the row and scroll
when they cannot, so the header on a phone stays at two rows. The
strip moves under the title only below 720 px, where it no longer
fits beside it. Drop the unused d_ports strings and the strip title.
---
 html/app.js     | 12 ++++++------
 html/index.html | 13 +++++++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/html/app.js b/html/app.js
index 13cc938f..1599e3f0 100644
--- a/html/app.js
+++ b/html/app.js
@@ -12,7 +12,7 @@ c_port:"Port",c_name:"Name",c_link:"Link",c_apply:"Apply",c_cancel:"Cancel",c_co
 c_close:"Close",c_refresh:"Refresh",c_off:"off",c_offc:"Off",c_down:"down",c_on:"On",c_auto:"Auto",c_delete:"Delete",
 c_type:"Type",c_state:"State",c_enabled:"Enabled",c_load:"Load",c_disable:"Disable",c_sfp:"SFP",
 c_full:"full",c_half:"half",c_yes:"yes",c_no:"no",
-d_ports:"Ports",d_ports_h:"click a port for details",d_system:"System",d_traffic:"Traffic",
+d_system:"System",d_traffic:"Traffic",
 d_traffic_h:"packets/s, live",d_txpps:"TX pps",d_rxpps:"RX pps",d_txbad:"TX bad",d_rxbad:"RX bad",
 i_host:"Hostname",i_ip:"IP address",i_mask:"Netmask",i_gw:"Gateway",i_mac:"MAC",i_fw:"Firmware",
 i_built:"Built",i_hw:"Hardware",i_temp:"Temperature",i_flash:"Flash",i_syslog:"Syslog",
@@ -143,7 +143,7 @@ c_port:"ポート",c_name:"名前",c_link:"リンク",c_apply:"適用",c_cancel:
 c_close:"閉じる",c_refresh:"更新",c_off:"オフ",c_offc:"オフ",c_down:"リンクダウン",c_on:"オン",c_auto:"自動",c_delete:"削除",
 c_type:"タイプ",c_state:"状態",c_enabled:"有効",c_load:"読み込み",c_disable:"無効化",c_sfp:"SFP",
 c_full:"全二重",c_half:"半二重",c_yes:"はい",c_no:"いいえ",
-d_ports:"ポート",d_ports_h:"ポートをクリックすると詳細を表示",d_system:"システム",d_traffic:"トラフィック",
+d_system:"システム",d_traffic:"トラフィック",
 d_traffic_h:"パケット/秒、リアルタイム",d_txpps:"TX pps",d_rxpps:"RX pps",d_txbad:"TX 異常",d_rxbad:"RX 異常",
 i_host:"ホスト名",i_ip:"IP アドレス",i_mask:"ネットマスク",i_gw:"ゲートウェイ",i_mac:"MAC",i_fw:"ファームウェア",
 i_built:"ビルド日",i_hw:"ハードウェア",i_temp:"温度",i_flash:"フラッシュ",i_syslog:"Syslog",
@@ -256,7 +256,7 @@ c_port:"端口",c_name:"名称",c_link:"链路",c_apply:"应用",c_cancel:"取
 c_close:"关闭",c_refresh:"刷新",c_off:"关",c_offc:"关",c_down:"未连接",c_on:"开",c_auto:"自动",c_delete:"删除",
 c_type:"类型",c_state:"状态",c_enabled:"启用",c_load:"读取",c_disable:"禁用",c_sfp:"SFP",
 c_full:"全双工",c_half:"半双工",c_yes:"是",c_no:"否",
-d_ports:"端口",d_ports_h:"点击端口查看详情",d_system:"系统",d_traffic:"流量",
+d_system:"系统",d_traffic:"流量",
 d_traffic_h:"包/秒，实时",d_txpps:"TX pps",d_rxpps:"RX pps",d_txbad:"TX 错误",d_rxbad:"RX 错误",
 i_host:"主机名",i_ip:"IP 地址",i_mask:"子网掩码",i_gw:"网关",i_mac:"MAC",i_fw:"固件",
 i_built:"构建日期",i_hw:"硬件",i_temp:"温度",i_flash:"Flash",i_syslog:"Syslog",
@@ -369,7 +369,7 @@ c_port:"Puerto",c_name:"Nombre",c_link:"Enlace",c_apply:"Aplicar",c_cancel:"Canc
 c_close:"Cerrar",c_refresh:"Actualizar",c_off:"apagado",c_offc:"Apagado",c_down:"caído",c_on:"Encendido",c_auto:"Auto",c_delete:"Eliminar",
 c_type:"Tipo",c_state:"Estado",c_enabled:"Habilitado",c_load:"Cargar",c_disable:"Deshabilitar",c_sfp:"SFP",
 c_full:"dúplex completo",c_half:"semidúplex",c_yes:"sí",c_no:"no",
-d_ports:"Puertos",d_ports_h:"pulsa un puerto para ver detalles",d_system:"Sistema",d_traffic:"Tráfico",
+d_system:"Sistema",d_traffic:"Tráfico",
 d_traffic_h:"paquetes/s, en vivo",d_txpps:"TX pps",d_rxpps:"RX pps",d_txbad:"TX erróneos",d_rxbad:"RX erróneos",
 i_host:"Nombre de host",i_ip:"Dirección IP",i_mask:"Máscara de red",i_gw:"Puerta de enlace",i_mac:"MAC",i_fw:"Firmware",
 i_built:"Compilado",i_hw:"Hardware",i_flash:"Flash",i_syslog:"Syslog",
@@ -481,7 +481,7 @@ c_port:"Port",c_name:"Nom",c_link:"Lien",c_apply:"Appliquer",c_cancel:"Annuler",
 c_close:"Fermer",c_refresh:"Raffraichir",c_off:"arrêt",c_offc:"Arrêt",c_down:"arrêt",c_on:"Marche",c_auto:"Auto",c_delete:"Supprimer",
 c_type:"Type",c_state:"Etat",c_enabled:"Activé",c_load:"Charger",c_disable:"Désactivé",c_sfp:"SFP",
 c_full:"full",c_half:"half",c_yes:"oui",c_no:"non",
-d_ports:"Ports",d_ports_h:"Cliquez ou survollez pour plus de détails",d_system:"Système",d_traffic:"Trafic",
+d_system:"Système",d_traffic:"Trafic",
 d_traffic_h:"paquets/s (en direct)",d_txpps:"TX pps",d_rxpps:"RX pps",d_txbad:"TX KO",d_rxbad:"RX KO",
 i_host:"Nom d'hote",i_ip:"Adresse IP",i_mask:"Masque réseau",i_gw:"Passerelle",i_mac:"Adresse MAC",i_fw:"Micro logiciel",
 i_built:"Compilé le",i_hw:"Matériel",i_temp:"Température",i_flash:"Taille Flash",i_syslog:"Journal système",
@@ -598,7 +598,7 @@ c_port:"Port",c_name:"Name",c_link:"Link",c_apply:"Übernehmen",c_cancel:"Abbrec
 c_close:"Schliessen",c_refresh:"Aktualisieren",c_off:"aus",c_offc:"Aus",c_down:"getrennt",c_on:"Ein",c_auto:"Auto",c_delete:"Löschen",
 c_type:"Typ",c_state:"Zustand",c_enabled:"Aktiviert",c_load:"Laden",c_disable:"Deaktivieren",c_sfp:"SFP",
 c_full:"voll",c_half:"halb",c_yes:"ja",c_no:"nein",
-d_ports:"Ports",d_ports_h:"Port anklicken für Details",d_system:"System",d_traffic:"Datenverkehr",
+d_system:"System",d_traffic:"Datenverkehr",
 d_traffic_h:"Pakete/s, live",d_txpps:"TX Pakete/s",d_rxpps:"RX Pakete/s",d_txbad:"TX fehlerhaft",d_rxbad:"RX fehlerhaft",
 i_host:"Hostname",i_ip:"IP-Adresse",i_mask:"Netzmaske",i_gw:"Gateway",i_mac:"MAC",i_fw:"Firmware",
 i_built:"Erstellt",i_hw:"Hardware",i_temp:"Temperatur",i_flash:"Flash",i_syslog:"Syslog",
diff --git a/html/index.html b/html/index.html
index a0e24ef7..f95c8219 100644
--- a/html/index.html
+++ b/html/index.html
@@ -112,7 +112,9 @@ label.row span.lb{width:110px;flex:none;color:var(--fg2);font-size:13px}
 }
 .switch input:checked+i{background:var(--ok)}
 .switch input:checked+i:before{transform:translateX(15px)}
-#strip{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:center;min-width:0}
+#strip{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}
+.port:first-child{margin-left:auto}
+.port:last-child{margin-right:auto}
 .port{
   width:40px;border:2px solid var(--bd);border-radius:7px;padding:3px 0 2px;
   text-align:center;cursor:pointer;background:var(--panel2);position:relative;
@@ -180,10 +182,13 @@ button.danger{background:var(--bad);color:#fff;border-color:transparent}
   #burger{display:block}
   main{padding:14px 12px 40px}
   #top{padding:8px 10px;gap:7px}
-  #ttitle{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
-  #strip{order:3;flex-basis:100%;justify-content:flex-start}
+  #ttitle{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
   #dirty{padding:2px 7px}
 }
+@media (max-width:720px){
+  #ttitle{flex:1}
+  #strip{order:3;flex-basis:100%}
+}
 </style>
 <script>
 (function(){
@@ -216,7 +221,7 @@ button.danger{background:var(--bad);color:#fff;border-color:transparent}
       <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--fg)" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
     </button>
     <span id="ttitle"></span>
-    <div id="strip" data-i18n-t="d_ports_h"></div>
+    <div id="strip"></div>
     <span id="dirty" data-i18n="hdr_dirty" data-i18n-t="hdr_dirty_t">unsaved changes</span>
     <button class="ctl pri" id="saveBtn" data-i18n="hdr_save" data-i18n-t="hdr_save_t">Save to flash</button>
   </header>