From 65ff1ad6fe27783de300e2ebf3c4cba5bb6370d1 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Mon, 23 Mar 2026 01:17:39 +0000
Subject: [PATCH] =?UTF-8?q?Customization:=20compact=20icon=20tabs=20?=
 =?UTF-8?q?=E2=80=94=20no=20scrolling=20needed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tabs now use emoji + short text label below, flex equally across
panel width. No horizontal scrolling.
---
 public/customize.js | 19 ++++++++++---------
 public/index.html   |  2 +-
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/public/customize.js b/public/customize.js
index 23fd9297..f2d6998d 100644
--- a/public/customize.js
+++ b/public/customize.js
@@ -159,9 +159,10 @@
       .cust-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-muted); padding: 4px 8px; border-radius: 4px; }
       .cust-close:hover { background: var(--surface-3); color: var(--text); }
       .cust-body { flex: 1; overflow-y: auto; padding: 0; }
-      .cust-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
-      .cust-tab { padding: 8px 12px; cursor: pointer; border: none; background: none; color: var(--text-muted);
-        font-size: 12px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
+      .cust-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
+      .cust-tab { padding: 8px 10px; cursor: pointer; border: none; background: none; color: var(--text-muted);
+        font-size: 12px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: 1; text-align: center; }
+      .cust-tab-text { font-size: 10px; display: block; }
       .cust-tab:hover { color: var(--text); }
       .cust-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
       .cust-panel { display: none; padding: 12px 16px; }
@@ -233,15 +234,15 @@
 
   function renderTabs() {
     var tabs = [
-      { id: 'branding', label: '🏷️ Branding' },
-      { id: 'theme', label: '🎨 Theme' },
-      { id: 'nodes', label: '📡 Nodes' },
-      { id: 'home', label: '🏠 Home Page' },
-      { id: 'export', label: '📤 Export' }
+      { id: 'branding', label: '🏷️', title: 'Branding' },
+      { id: 'theme', label: '🎨', title: 'Theme Colors' },
+      { id: 'nodes', label: '📡', title: 'Node Colors' },
+      { id: 'home', label: '🏠', title: 'Home Page' },
+      { id: 'export', label: '📤', title: 'Export / Save' }
     ];
     return '<div class="cust-tabs">' +
       tabs.map(function (t) {
-        return '<button class="cust-tab' + (t.id === activeTab ? ' active' : '') + '" data-tab="' + t.id + '">' + t.label + '</button>';
+        return '<button class="cust-tab' + (t.id === activeTab ? ' active' : '') + '" data-tab="' + t.id + '" title="' + t.title + '">' + t.label + ' <span class="cust-tab-text">' + t.title + '</span></button>';
       }).join('') + '</div>';
   }
 
diff --git a/public/index.html b/public/index.html
index 94cd758e..2ecb788a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -101,6 +101,6 @@
   <script src="observer-detail.js?v=1774219440" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="perf.js?v=1773985649" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="customize.js?v=1774227196" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="customize.js?v=1774228659" onerror="console.error('Failed to load:', this.src)"></script>
 </body>
 </html>