From 1d30ea270884b73a75ae5af7fceba095e84e2f56 Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Wed, 21 Jan 2026 22:30:04 +0000
Subject: [PATCH] Fix WiFi table columns and channel chart overflow

Table fixes:
- Add BSSID column header to match data columns
- Remove vendor column from table rows (6 columns total)
- Update placeholder colspan to 6

Layout fixes:
- Use minmax() for right columns to allow shrinking
- Add overflow handling to layout container
- Add min-width: 0 to analysis panel for proper grid behavior
- Add overflow-x: auto to channel chart container

Channel chart fixes:
- Reduce bar width from 20px to 14px
- Reduce bar spacing from 4px to 2px
- Reduce padding for more compact display
- Use viewBox for responsive SVG scaling

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 static/css/index.css                  | 10 ++++++++--
 static/js/components/channel-chart.js | 12 ++++++------
 static/js/modes/wifi.js               |  1 -
 templates/index.html                  |  3 ++-
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/static/css/index.css b/static/css/index.css
index 6cddb5b..686aeb6 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -3154,6 +3154,8 @@ header h1 .tagline {
     border: 1px solid var(--border-color);
     height: calc(100vh - 200px);
     min-height: 400px;
+    box-sizing: border-box;
+    overflow: hidden;
 }
 
 /* WiFi Status Bar */
@@ -3201,11 +3203,11 @@ header h1 .tagline {
 /* WiFi Main Content - 3 columns */
 .wifi-main-content {
     display: grid;
-    grid-template-columns: 1fr 280px 280px;
+    grid-template-columns: 1fr minmax(240px, 280px) minmax(240px, 280px);
     gap: 10px;
     flex: 1;
     min-height: 0;
-    overflow: hidden;
+    overflow: auto;
 }
 
 /* WiFi Networks Panel (LEFT) */
@@ -3435,6 +3437,8 @@ header h1 .tagline {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    min-width: 0;
+    overflow: hidden;
 }
 
 .wifi-channel-section,
@@ -3488,6 +3492,8 @@ header h1 .tagline {
 
 .wifi-channel-chart {
     min-height: 120px;
+    overflow-x: auto;
+    overflow-y: hidden;
 }
 
 .wifi-security-stats {
diff --git a/static/js/components/channel-chart.js b/static/js/components/channel-chart.js
index 1d11769..a69c670 100644
--- a/static/js/components/channel-chart.js
+++ b/static/js/components/channel-chart.js
@@ -13,10 +13,10 @@ const ChannelChart = (function() {
     // ==========================================================================
 
     const CONFIG = {
-        height: 150,
-        barWidth: 20,
-        barSpacing: 4,
-        padding: { top: 20, right: 20, bottom: 30, left: 40 },
+        height: 120,
+        barWidth: 14,
+        barSpacing: 2,
+        padding: { top: 15, right: 10, bottom: 25, left: 30 },
         colors: {
             low: '#22c55e',      // Green - low utilization
             medium: '#eab308',   // Yellow - medium
@@ -108,9 +108,9 @@ const ChannelChart = (function() {
             if (s.ap_count > maxApCount) maxApCount = s.ap_count;
         });
 
-        // Build SVG
+        // Build SVG with viewBox for responsive scaling
         let svg = `
-            <svg width="${width}" height="${height}" class="channel-chart-svg">
+            <svg viewBox="0 0 ${width} ${height}" class="channel-chart-svg" style="width: 100%; height: auto; max-height: ${height}px;">
                 <defs>
                     <linearGradient id="utilGradientLow" x1="0%" y1="0%" x2="0%" y2="100%">
                         <stop offset="0%" style="stop-color:${CONFIG.colors.low};stop-opacity:0.9" />
diff --git a/static/js/modes/wifi.js b/static/js/modes/wifi.js
index c02bca0..a386e85 100644
--- a/static/js/modes/wifi.js
+++ b/static/js/modes/wifi.js
@@ -731,7 +731,6 @@ const WiFiMode = (function() {
                     <span class="security-badge ${securityClass}">${escapeHtml(network.security)}</span>
                 </td>
                 <td class="col-clients">${network.client_count || 0}</td>
-                <td class="col-vendor">${escapeHtml(network.vendor || '-')}</td>
             </tr>
         `;
     }
diff --git a/templates/index.html b/templates/index.html
index 6cd877d..a9414ae 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -521,6 +521,7 @@
                                     <thead>
                                         <tr>
                                             <th class="sortable" data-sort="essid">SSID</th>
+                                            <th class="sortable" data-sort="bssid">BSSID</th>
                                             <th class="sortable" data-sort="channel">Ch</th>
                                             <th class="sortable" data-sort="rssi">Signal</th>
                                             <th class="sortable" data-sort="security">Security</th>
@@ -529,7 +530,7 @@
                                     </thead>
                                     <tbody id="wifiNetworkTableBody">
                                         <tr class="wifi-network-placeholder">
-                                            <td colspan="5">
+                                            <td colspan="6">
                                                 <div class="placeholder-text">Start scanning to discover networks</div>
                                             </td>
                                         </tr>