fix(colorways): restore original chip visual after anchor swap

f9d25bc283d6cafc80ff4285c985193f0f837b6a · 2026-05-29 14:15:00 -0700 · Steve Abrams

inline-flex centering moved the v-label to the chip's center which looked
off vs the original button (label was top-left). Switch to inline-block +
zero padding/margin/line-height on the anchor, with display:block label
at padding:2px 0 0 3px (matching the original button's natural rendering).

Files touched

M public/js/color-dots.js

Diff

commit f9d25bc283d6cafc80ff4285c985193f0f837b6a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri May 29 14:15:00 2026 -0700

    fix(colorways): restore original chip visual after anchor swap
    
    inline-flex centering moved the v-label to the chip's center which looked
    off vs the original button (label was top-left). Switch to inline-block +
    zero padding/margin/line-height on the anchor, with display:block label
    at padding:2px 0 0 3px (matching the original button's natural rendering).
---
 public/js/color-dots.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/public/js/color-dots.js b/public/js/color-dots.js
index 6cdbf50..57c68e8 100644
--- a/public/js/color-dots.js
+++ b/public/js/color-dots.js
@@ -210,11 +210,16 @@
       b.href = '/design/' + did + '?cw=' + cw.id;
       b.title = (cw.name || ('Version ' + cw.version)) + ' · ' + new Date(cw.created_at).toLocaleString() + ' · open as product';
       var stops = (cw.ink_map || []).map(function (m) { return m.to; });
-      b.style.cssText = 'display:inline-flex;align-items:center;justify-content:center;' +
-        'border:1px solid #ccc;border-radius:6px;width:32px;height:22px;cursor:pointer;text-decoration:none;' +
+      // Match the original button's exact visual: 32×22 chip with the v-label
+      // floated as a block element inside (which is how the button rendered it
+      // before this anchor swap). inline-block + zero padding/margin neutralizes
+      // browser-default <a> spacing.
+      b.style.cssText = 'display:inline-block;box-sizing:border-box;' +
+        'border:1px solid #ccc;border-radius:6px;width:32px;height:22px;' +
+        'padding:0;margin:0;cursor:pointer;text-decoration:none;line-height:0;' +
         (stops.length ? 'background:linear-gradient(90deg,' + stops.join(',') + ')' : 'background:#eee');
       var lab = document.createElement('span'); lab.textContent = 'v' + cw.version;
-      b.appendChild(lab); lab.style.cssText = 'font:700 8px sans-serif;color:#fff;text-shadow:0 0 2px #000';
+      b.appendChild(lab); lab.style.cssText = 'display:block;font:700 8px sans-serif;line-height:1;color:#fff;text-shadow:0 0 2px #000;padding:2px 0 0 3px';
       b.addEventListener('click', function (ev) {
         if (ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.button === 1) return;
         ev.preventDefault();

← 759068a trade-login: add password sign-in (env-var gated) alongside · back to Wallco Ai · Age prompt: voice the message on load via Web Speech API (be a72f554 →