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

@@ -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 {

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" />

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>
         `;
     }

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>