Fix iOS/mobile UX: simplified table + better touch targets

Mobile UX improvements:
- Simplify results table: Title | Duration | Tracks only
- Remove Source (always bitmidi) and Match columns
- Make entire row clickable - no button needed
- Hide Tracks column on mobile (<640px)
- Larger touch targets throughout

Progress bar fixes:
- Larger thumb (20px) for easier iOS touch
- Both 'input' and 'change' events for iOS compatibility
- Larger wrapper height (44px) for comfortable touch
- Scale animation on active thumb
- Better track styling

Table improvements:
- Mobile-responsive padding
- Better cursor states
- Cleaner selected state with accent border

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

index.html

@@ -142,23 +142,75 @@
         .results-table {
             width: 100%;
             border-collapse: collapse;
-            margin: 20px 0;
+            margin: calc(var(--spacing-unit) * 2) 0;
+            background: var(--color-surface);
+            border-radius: var(--radius);
+            overflow: hidden;
+            box-shadow: var(--shadow-md);
         }
+
         .results-table th,
         .results-table td {
-            padding: 8px 12px;
+            padding: calc(var(--spacing-unit) * 2);
             text-align: left;
-            border-bottom: 1px solid #333;
+            border-bottom: 1px solid var(--color-border);
         }
+
         .results-table th {
-            background: #222;
+            background: var(--color-surface-elevated);
-            color: #00ff88;
+            color: var(--color-accent-primary);
+            font-weight: 600;
+            font-size: 12px;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
         }
-        .results-table tr:hover {
+
-            background: #1a1a1a;
+        .results-table .duration-col,
+        .results-table .tracks-col {
+            width: 80px;
+            text-align: center;
         }
+
+        .results-table tbody tr {
+            cursor: pointer;
+            transition: background 150ms ease;
+        }
+
+        .results-table tbody tr:hover {
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .results-table tbody tr:last-child td {
+            border-bottom: none;
+        }
+
         .results-table tr.selected {
-            background: #2a2a2a;
+            background: rgba(0, 255, 136, 0.12);
+        }
+
+        .results-table tr.selected td:first-child {
+            border-left: 4px solid var(--color-accent-primary);
+            padding-left: calc(var(--spacing-unit) * 2 - 4px);
+        }
+
+        @media (max-width: 640px) {
+            .results-table th,
+            .results-table td {
+                padding: calc(var(--spacing-unit) * 1.5);
+                font-size: 14px;
+            }
+
+            .results-table th {
+                font-size: 11px;
+            }
+
+            .results-table .tracks-col {
+                display: none;
+            }
+
+            .results-table .duration-col {
+                width: 60px;
+            }
         }
         
         .confidence-bar {
@@ -399,49 +451,72 @@
         }
         .progress-bar-wrapper {
             position: relative;
-            height: 32px;
+            height: 44px;
             display: flex;
             align-items: center;
+            padding: calc(var(--spacing-unit) * 2) 0;
         }
+
         .progress-bar {
             width: 100%;
-            height: 8px;
+            height: 6px;
             -webkit-appearance: none;
             appearance: none;
-            background: rgba(255, 255, 255, 0.1);
+            background: transparent;
-            border-radius: 4px;
+            border-radius: 3px;
             outline: none;
             cursor: pointer;
             position: relative;
             z-index: 2;
         }
+
+        .progress-bar::-webkit-slider-runnable-track {
+            height: 6px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+        }
+
         .progress-bar::-webkit-slider-thumb {
             -webkit-appearance: none;
             appearance: none;
-            width: 16px;
+            width: 20px;
-            height: 16px;
+            height: 20px;
             border-radius: 50%;
-            background: #ffaa44;
+            background: var(--color-accent-secondary);
             cursor: pointer;
-            box-shadow: 0 0 10px rgba(255, 170, 68, 0.5);
+            box-shadow: 0 0 8px rgba(255, 170, 68, 0.6), var(--shadow-sm);
+            margin-top: -7px;
+            transition: transform 100ms ease;
         }
+
+        .progress-bar:active::-webkit-slider-thumb {
+            transform: scale(1.15);
+        }
+
+        .progress-bar::-moz-range-track {
+            height: 6px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+        }
+
         .progress-bar::-moz-range-thumb {
-            width: 16px;
+            width: 20px;
-            height: 16px;
+            height: 20px;
             border-radius: 50%;
-            background: #ffaa44;
+            background: var(--color-accent-secondary);
             cursor: pointer;
             border: none;
-            box-shadow: 0 0 10px rgba(255, 170, 68, 0.5);
+            box-shadow: 0 0 8px rgba(255, 170, 68, 0.6), var(--shadow-sm);
         }
+
         .progress-fill {
             position: absolute;
             left: 0;
             top: 50%;
             transform: translateY(-50%);
-            height: 8px;
+            height: 6px;
-            background: linear-gradient(90deg, #ffaa44, rgba(255, 170, 68, 0.6));
+            background: linear-gradient(90deg, var(--color-accent-secondary), rgba(255, 170, 68, 0.5));
-            border-radius: 4px;
+            border-radius: 3px;
             pointer-events: none;
             z-index: 1;
             width: 0%;
@@ -485,11 +560,8 @@
                 <thead>
                     <tr>
                         <th>Title</th>
-                        <th>Source</th>
+                        <th class="duration-col">Duration</th>
-                        <th>Match</th>
+                        <th class="tracks-col">Tracks</th>
-                        <th>Duration</th>
-                        <th>Tracks</th>
-                        <th></th>
                     </tr>
                 </thead>
                 <tbody id="resultsBody">

src/main.ts

@@ -112,10 +112,13 @@ class MotifApp {
       const volume = parseFloat((e.target as HTMLInputElement).value);
       this.motifEngine.setVolume(volume);
     });
-    this.motifProgressBar.addEventListener('input', (e) => {
+    // Use both input and change for iOS compatibility
+    const seekHandler = (e: Event) => {
       const progress = parseFloat((e.target as HTMLInputElement).value) / 100;
       this.handleMotifSeek(progress);
-    });
+    };
+    this.motifProgressBar.addEventListener('input', seekHandler);
+    this.motifProgressBar.addEventListener('change', seekHandler);
 
     this.nextResultBtn.addEventListener('click', () => this.handleNextResult());
   }
@@ -160,31 +163,27 @@ class MotifApp {
 
   private displayResults(): void {
     this.resultsBody.innerHTML = '';
-    
+
     this.searchResults.forEach((result, index) => {
       const row = document.createElement('tr');
       if (index === this.selectedResultIndex) {
         row.classList.add('selected');
       }
-      
+
       row.innerHTML = `
         <td>${result.title}</td>
-        <td>${result.source}</td>
+        <td class="duration-col">${result.parsed ? Math.round(result.parsed.durationSec) + 's' : '?'}</td>
-        <td>
+        <td class="tracks-col">${result.parsed ? result.parsed.tracks.length : '?'}</td>
-          <div class="confidence-bar">
-            <div class="confidence-fill" style="width: ${result.confidence * 100}%"></div>
-          </div>
-        </td>
-        <td>${result.parsed ? Math.round(result.parsed.durationSec) + 's' : '?'}</td>
-        <td>${result.parsed ? result.parsed.tracks.length : '?'}</td>
-        <td><button onclick="window.app.selectResult(${index})">Select</button></td>
       `;
-      
+
+      // Make entire row clickable
+      row.addEventListener('click', () => this.selectResult(index));
+
       this.resultsBody.appendChild(row);
     });
-    
+
     this.resultsSection.classList.add('visible');
-    
+
     // Auto-select first result
     if (this.searchResults.length > 0) {
       this.selectResult(0);