From 5fcd68c97636206e945dfe8dd1fa5410ae0961c6 Mon Sep 17 00:00:00 2001
From: Tommy Parnell <tommy@terrible.dev>
Date: Fri, 23 Oct 2026 22:56:09 -0400
Subject: [PATCH] fix(ui): responsive word construction tray to fit all 4 tiles
 without clipping on mobile

---
 src/components/WordBuilder.js |  19 +++---
 src/styles/board.css          | 110 +++++++++++++++++++++++++---------
 2 files changed, 90 insertions(+), 39 deletions(-)

diff --git a/src/components/WordBuilder.js b/src/components/WordBuilder.js
index f0be954..a3e7e1f 100644
--- a/src/components/WordBuilder.js
+++ b/src/components/WordBuilder.js
@@ -9,8 +9,10 @@ export function createWordBuilder({ onTileRemoved, onTilesReordered, onSubmitWor
   let touchMoved = false;
 
   function render(state) {
-    const hasTiles = state.activeTileIds.length > 0;
+    const tileCount = state.activeTileIds.length;
+    const hasTiles = tileCount > 0;
     const tileObjects = state.activeTileIds.map(id => state.boardTiles.find(t => t.id === id)).filter(Boolean);
+    const pts = tileCount === 4 ? 8 : tileCount === 3 ? 4 : tileCount === 2 ? 2 : 1;
 
     wrapper.innerHTML = `
       <div class="word-builder ${hasTiles ? 'has-tiles' : ''}" id="active-word-builder">
@@ -21,8 +23,7 @@ export function createWordBuilder({ onTileRemoved, onTilesReordered, onSubmitWor
                   .map(
                     (tile, idx) => `
                 <div class="active-tile-chip" data-idx="${idx}" draggable="true" title="Tap to remove or drag to reorder">
-                  <span>${tile.text}</span>
-                  <span class="remove-icon">✕</span>
+                  <span class="chip-text">${tile.text}</span>
                 </div>
               `
                   )
@@ -31,15 +32,13 @@ export function createWordBuilder({ onTileRemoved, onTilesReordered, onSubmitWor
           }
         </div>
         <div class="builder-actions">
-          <button class="btn-icon-tray" id="btn-builder-clear" title="Clear all tiles" ${!hasTiles ? 'style="opacity:0.3;pointer-events:none;"' : ''}>
-            ✕
-          </button>
-          <button class="btn-icon-tray" id="btn-builder-backspace" title="Remove last tile" ${!hasTiles ? 'style="opacity:0.3;pointer-events:none;"' : ''}>
+          <button class="btn-icon-tray" id="btn-builder-backspace" title="Remove last tile" ${!hasTiles ? 'style="opacity:0.25;pointer-events:none;"' : ''}>
             ⌫
           </button>
-          <button class="btn-submit-tray" id="btn-builder-submit" ${!hasTiles ? 'disabled' : ''}>
-            <span>✓</span>
-            <span>ENTER</span>
+          <button class="btn-submit-tray" id="btn-builder-submit" ${!hasTiles ? 'disabled' : ''} title="Submit word (Enter)">
+            <span class="submit-icon">✓</span>
+            <span class="submit-text">ENTER</span>
+            ${hasTiles ? `<span class="submit-pts">+${pts}</span>` : ''}
           </button>
         </div>
       </div>
diff --git a/src/styles/board.css b/src/styles/board.css
index d0f383b..e2fc5b8 100644
--- a/src/styles/board.css
+++ b/src/styles/board.css
@@ -45,24 +45,23 @@
 .active-tiles-container {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
   flex: 1;
-  min-height: 48px;
-  overflow-x: auto;
-  scrollbar-width: none;
-  padding: 2px 4px;
-}
-
-.active-tiles-container::-webkit-scrollbar {
-  display: none;
+  min-width: 0;
+  min-height: 44px;
+  overflow: visible;
+  padding: 2px 2px;
 }
 
 .builder-placeholder {
   color: var(--text-tertiary);
-  font-size: 0.92rem;
+  font-size: 0.9rem;
   font-weight: 500;
   letter-spacing: -0.01em;
-  padding-left: 8px;
+  padding-left: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Active Tile Chip */
@@ -70,19 +69,23 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 8px 14px;
+  padding: 6px 10px;
   background: var(--tile-bg);
   color: var(--text-primary);
   border: 1.5px solid var(--tile-border);
   border-radius: var(--radius-md);
-  font-size: 1.12rem;
+  font-size: 1.02rem;
   font-weight: 700;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.02em;
   box-shadow: var(--tile-shadow);
   cursor: grab;
   position: relative;
   transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
   animation: chipInsert 0.22s var(--ease-spring);
+  flex: 0 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
 }
 
 .active-tile-chip:active {
@@ -100,13 +103,6 @@
   transform: scale(1.06);
 }
 
-.active-tile-chip .remove-icon {
-  margin-left: 6px;
-  font-size: 0.75rem;
-  color: var(--text-tertiary);
-  opacity: 0.7;
-}
-
 @keyframes chipInsert {
   0% { transform: scale(0.7) translateY(8px); opacity: 0; }
   100% { transform: scale(1) translateY(0); opacity: 1; }
@@ -116,22 +112,24 @@
 .builder-actions {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
   margin-left: 6px;
+  flex-shrink: 0;
 }
 
 .btn-icon-tray {
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg-tertiary);
   color: var(--text-secondary);
-  font-size: 1.1rem;
+  font-size: 1.05rem;
   font-weight: 600;
   transition: all var(--transition-fast);
+  flex-shrink: 0;
 }
 
 .btn-icon-tray:hover {
@@ -145,19 +143,21 @@
 }
 
 .btn-submit-tray {
-  height: 40px;
-  padding: 0 16px;
+  height: 36px;
+  padding: 0 12px;
   border-radius: var(--radius-md);
   background: var(--accent-submit-gradient);
   color: #ffffff;
-  font-size: 0.95rem;
+  font-size: 0.88rem;
   font-weight: 700;
   letter-spacing: 0.02em;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
   box-shadow: 0 2px 8px var(--accent-submit-glow);
   transition: all var(--transition-fast);
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .btn-submit-tray:hover {
@@ -176,6 +176,58 @@
   box-shadow: none;
 }
 
+.submit-pts {
+  display: inline-block;
+  font-size: 0.72rem;
+  background: rgba(255, 255, 255, 0.28);
+  padding: 1px 5px;
+  border-radius: 999px;
+  font-weight: 800;
+  margin-left: 2px;
+}
+
+@media (max-width: 420px) {
+  .word-builder {
+    padding: 3px 6px;
+    min-height: 48px;
+  }
+  .active-tiles-container {
+    gap: 4px;
+  }
+  .active-tile-chip {
+    padding: 5px 6px;
+    font-size: 0.9rem;
+    border-radius: var(--radius-sm);
+  }
+  .builder-actions {
+    gap: 4px;
+    margin-left: 4px;
+  }
+  .btn-icon-tray {
+    width: 32px;
+    height: 32px;
+    font-size: 0.95rem;
+  }
+  .btn-submit-tray {
+    height: 32px;
+    padding: 0 8px;
+    font-size: 0.8rem;
+  }
+  .submit-pts {
+    display: none;
+  }
+}
+
+@media (max-width: 350px) {
+  .active-tile-chip {
+    padding: 4px 4px;
+    font-size: 0.82rem;
+  }
+  .btn-submit-tray .submit-text {
+    display: none;
+  }
+}
+
 /* ==========================================================================
    THE 4x5 BOARD GRID (20 TILES)
    ========================================================================== */