Fix mode tab buttons: explicit IDs, flex-wrap, z-index

- Add explicit IDs to mode tab buttons (modeImage, modePattern)
- Bind click handlers directly by ID instead of querySelectorAll
- Add type="button" to prevent form submit behavior
- Change controls flex-wrap to wrap (was nowrap, hiding tabs on narrow screens)
- Add user-select: none and z-index to tab buttons
- Dedicated switchMode() function for cleaner state management

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

static/app.js

@@ -38,26 +38,26 @@ let currentMode = 'image';
 
 // ── Mode Switching ──────────────────────────────
 
-document.querySelectorAll('.mode-tab').forEach(tab => {
-  tab.addEventListener('click', () => {
-    document.querySelectorAll('.mode-tab').forEach(t => t.classList.remove('active'));
-    tab.classList.add('active');
-    currentMode = tab.dataset.mode;
+const modeImage = $('modeImage');
+const modePattern = $('modePattern');
 
-    if (currentMode === 'pattern') {
-      imageControls.style.display = 'none';
-      patternControls.style.display = 'flex';
-      generateBtn.style.display = 'none';
-      randomBtn.style.display = '';
-    } else {
-      imageControls.style.display = 'flex';
-      patternControls.style.display = 'none';
-      generateBtn.style.display = '';
-      generateBtn.disabled = !currentFile;
-      randomBtn.style.display = 'none';
-    }
-  });
-});
+function switchMode(mode) {
+  currentMode = mode;
+  modeImage.classList.toggle('active', mode === 'image');
+  modePattern.classList.toggle('active', mode === 'pattern');
+
+  imageControls.style.display = mode === 'image' ? 'flex' : 'none';
+  patternControls.style.display = mode === 'pattern' ? 'flex' : 'none';
+  generateBtn.style.display = mode === 'image' ? '' : 'none';
+  randomBtn.style.display = mode === 'pattern' ? '' : 'none';
+
+  if (mode === 'image') {
+    generateBtn.disabled = !currentFile;
+  }
+}
+
+modeImage.addEventListener('click', () => switchMode('image'));
+modePattern.addEventListener('click', () => switchMode('pattern'));
 
 // ── File Handling ──────────────────────────────
 

static/style.css

@@ -38,11 +38,11 @@ header {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 6px 12px;
+  padding: 8px 12px;
   background: var(--surface);
   border-bottom: 1px solid var(--border);
   overflow-x: auto;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
 }
 
 /* ── Mode Tabs ─────────────────────────────── */
@@ -68,6 +68,10 @@ header {
   transition: all 0.2s;
   white-space: nowrap;
   letter-spacing: 0.3px;
+  user-select: none;
+  -webkit-user-select: none;
+  position: relative;
+  z-index: 1;
 }
 
 .mode-tab:hover {

templates/index.html

@@ -17,9 +17,9 @@
 <!-- Controls Bar -->
 <div class="controls">
   <!-- Mode tabs -->
-  <div class="mode-tabs">
-    <button class="mode-tab active" data-mode="image">&#x1F5BC; Image</button>
-    <button class="mode-tab" data-mode="pattern">&#x2728; Patterns</button>
+  <div class="mode-tabs" id="modeTabs">
+    <button type="button" class="mode-tab active" data-mode="image" id="modeImage">&#x1F5BC; Image</button>
+    <button type="button" class="mode-tab" data-mode="pattern" id="modePattern">&#x2728; Patterns</button>
   </div>
 
   <!-- Image mode controls -->