From d182980435e41d4c727441b69ca2de6406425615 Mon Sep 17 00:00:00 2001
From: Joachim Wiberg <troglobit@gmail.com>
Date: Sun, 29 Mar 2026 00:47:32 +0100
Subject: [PATCH] webui: fix formatting in dhcp and lldp pages

Signed-off-by: Joachim Wiberg <troglobit@gmail.com>
---
 src/webui/static/css/style.css      | 52 +++++++++++++++++++++++++++++
 src/webui/templates/pages/dhcp.html | 29 ++++++++--------
 src/webui/templates/pages/lldp.html | 11 +++---
 3 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/src/webui/static/css/style.css b/src/webui/static/css/style.css
index 0136cafd..fc1d6885 100644
--- a/src/webui/static/css/style.css
+++ b/src/webui/static/css/style.css
@@ -200,6 +200,8 @@ a:hover {
   flex: 1;
   padding: 2rem;
   overflow-y: auto;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 /* ==========================================================================
@@ -885,6 +887,20 @@ details[open].nav-group-top > summary.nav-group-summary-top::after {
   font-family: var(--font-mono);
 }
 
+.text-muted { color: var(--fg-muted); }
+
+/* Page title — used at the top of each content page */
+.page-title {
+  font-size: 1.375rem;
+  font-weight: 700;
+  color: var(--fg);
+  letter-spacing: -0.025em;
+  margin-bottom: 1.5rem;
+}
+
+/* Removes the redundant wrapping div some pages use */
+.page-content { display: contents; }
+
 /* ==========================================================================
    Domain Specific: Firewall, Keystore, Firmware
    ========================================================================== */
@@ -1022,6 +1038,42 @@ details[open].nav-group-top > summary.nav-group-summary-top::after {
 .light .badge-info    { background: #dbeafe; color: #1e40af; }
 .light .badge-neutral { background: var(--slate-100); color: var(--slate-600); }
 
+/* Sub-heading within a card body (e.g. "Active Leases" in DHCP) */
+.section-subtitle {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--fg-muted);
+  padding: 1rem 1.25rem 0.5rem;
+  margin: 0;
+  border-top: 1px solid var(--border);
+}
+
+/* Row of stat chips (e.g. DHCP counters) */
+.stats-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+}
+
+/* Stat chip: label + value pair */
+.stat-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.3rem 0.65rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+.stat-chip-label { color: var(--fg-muted); font-weight: 500; }
+.stat-chip-value { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
+
 /* Interfaces */
 .iface-name { white-space: nowrap; font-weight: 500; }
 .iface-name a { color: var(--primary); text-decoration: none; }
diff --git a/src/webui/templates/pages/dhcp.html b/src/webui/templates/pages/dhcp.html
index 4e2d4ef0..33a54122 100644
--- a/src/webui/templates/pages/dhcp.html
+++ b/src/webui/templates/pages/dhcp.html
@@ -9,24 +9,26 @@
 
 {{if .DHCP}}
 <section class="info-card">
-  <h2>DHCP Server</h2>
+  <div class="card-header">DHCP Server</div>
+  {{if .DHCP.Enabled}}
   <table class="info-table">
     <tr>
       <th>Status</th>
       <td>
-        <span class="status-dot {{if .DHCP.Enabled}}status-up{{else}}status-down{{end}}"></span>
-        {{if .DHCP.Enabled}}Enabled{{else}}Disabled{{end}}
+        <span class="status-dot status-up"></span>
+        Enabled
       </td>
     </tr>
   </table>
+  {{end}}
 
   <div class="stats-row">
-    <span class="zone-badge"><span class="zone-badge-label">Discovers</span><span class="zone-badge-value">{{.DHCP.Stats.InDiscoveries}}</span></span>
-    <span class="zone-badge"><span class="zone-badge-label">Requests</span><span class="zone-badge-value">{{.DHCP.Stats.InRequests}}</span></span>
-    <span class="zone-badge"><span class="zone-badge-label">Releases</span><span class="zone-badge-value">{{.DHCP.Stats.InReleases}}</span></span>
-    <span class="zone-badge"><span class="zone-badge-label">Offers</span><span class="zone-badge-value">{{.DHCP.Stats.OutOffers}}</span></span>
-    <span class="zone-badge"><span class="zone-badge-label">Acks</span><span class="zone-badge-value">{{.DHCP.Stats.OutAcks}}</span></span>
-    <span class="zone-badge"><span class="zone-badge-label">Naks</span><span class="zone-badge-value">{{.DHCP.Stats.OutNaks}}</span></span>
+    <span class="stat-chip"><span class="stat-chip-label">Discovers</span><span class="stat-chip-value">{{.DHCP.Stats.InDiscoveries}}</span></span>
+    <span class="stat-chip"><span class="stat-chip-label">Requests</span><span class="stat-chip-value">{{.DHCP.Stats.InRequests}}</span></span>
+    <span class="stat-chip"><span class="stat-chip-label">Releases</span><span class="stat-chip-value">{{.DHCP.Stats.InReleases}}</span></span>
+    <span class="stat-chip"><span class="stat-chip-label">Offers</span><span class="stat-chip-value">{{.DHCP.Stats.OutOffers}}</span></span>
+    <span class="stat-chip"><span class="stat-chip-label">Acks</span><span class="stat-chip-value">{{.DHCP.Stats.OutAcks}}</span></span>
+    <span class="stat-chip"><span class="stat-chip-label">Naks</span><span class="stat-chip-value">{{.DHCP.Stats.OutNaks}}</span></span>
   </div>
 
   {{if .DHCP.Leases}}
@@ -45,8 +47,8 @@
       <tbody>
         {{range .DHCP.Leases}}
         <tr>
-          <td class="num">{{.Address}}</td>
-          <td class="num">{{.MAC}}</td>
+          <td>{{.Address}}</td>
+          <td>{{.MAC}}</td>
           <td>{{if .Hostname}}{{.Hostname}}{{else}}<span class="text-muted">—</span>{{end}}</td>
           <td>{{.Expires}}</td>
           <td>{{if .ClientID}}{{.ClientID}}{{else}}<span class="text-muted">—</span>{{end}}</td>
@@ -56,12 +58,13 @@
     </table>
   </div>
   {{else}}
-  <p class="text-muted">No active leases.</p>
+  <p class="empty-message">No active leases.</p>
   {{end}}
 </section>
 {{else if not .Error}}
 <section class="info-card">
-  <p class="text-muted">DHCP server data not available.</p>
+  <div class="card-header">DHCP Server</div>
+  <p class="empty-message">DHCP server data not available.</p>
 </section>
 {{end}}
 {{end}}
diff --git a/src/webui/templates/pages/lldp.html b/src/webui/templates/pages/lldp.html
index 941f6f5c..2b2b2ca3 100644
--- a/src/webui/templates/pages/lldp.html
+++ b/src/webui/templates/pages/lldp.html
@@ -9,7 +9,7 @@
 
 {{if .Neighbors}}
 <section class="info-card">
-  <h2>LLDP Neighbors</h2>
+  <div class="card-header">LLDP Neighbors</div>
   <div class="data-table-wrap">
     <table class="data-table">
       <thead>
@@ -26,11 +26,11 @@
         {{range .Neighbors}}
         <tr>
           <td>{{.LocalPort}}</td>
-          <td class="num">{{.ChassisID}}</td>
+          <td>{{.ChassisID}}</td>
           <td>{{if .SystemName}}{{.SystemName}}{{else}}<span class="text-muted">—</span>{{end}}</td>
-          <td class="num">{{if .PortID}}{{.PortID}}{{else}}<span class="text-muted">—</span>{{end}}</td>
+          <td>{{if .PortID}}{{.PortID}}{{else}}<span class="text-muted">—</span>{{end}}</td>
           <td>{{if .PortDesc}}{{.PortDesc}}{{else}}<span class="text-muted">—</span>{{end}}</td>
-          <td class="num">{{if .MgmtAddress}}{{.MgmtAddress}}{{else}}<span class="text-muted">—</span>{{end}}</td>
+          <td>{{if .MgmtAddress}}{{.MgmtAddress}}{{else}}<span class="text-muted">—</span>{{end}}</td>
         </tr>
         {{end}}
       </tbody>
@@ -39,7 +39,8 @@
 </section>
 {{else if not .Error}}
 <section class="info-card">
-  <p class="text-muted">No LLDP neighbors discovered.</p>
+  <div class="card-header">LLDP Neighbors</div>
+  <p class="empty-message">No LLDP neighbors discovered.</p>
 </section>
 {{end}}
 {{end}}