LED Strip UI - Improved Layout

CLAUDE.md

@@ -113,6 +113,83 @@ MSP.send_message(MSPCodes.MSP_SOME_CODE, payload, false, () => {
 - **i18next** via `data-i18n` attributes: `<span data-i18n="key"></span>`
 - **ES6 modules** throughout (`import`/`export`)
 
+## CSS Best Practices
+
+**Core Principle: Let the Browser Do Its Job of Handling Sizes**
+
+Adding CSS to force specific sizes consistently causes problems. Removing that CSS and letting the browser calculate natural dimensions consistently produces better results.
+
+### ❌ Don't Do This
+
+```css
+/* Don't force widths on containers */
+.controls { width: 285px; }
+
+/* Don't force button widths */
+.button { width: 49%; }
+
+/* Especially Don't use pixels for font sizes! */
+.text { font-size: 16px; }
+```
+
+**Problems caused:**
+- Fixed widths create cramped layouts, overlaps, and wasted space
+- Forced button widths look unnatural
+- Pixel font sizes don't scale across different display densities (200 DPI vs 800 DPI)
+- Breaks user font size preferences and accessibility
+
+### ✅ Do This Instead
+
+```css
+/* Let containers size naturally */
+.controls { width: fit-content; }
+/* Or just don't set width at all */
+
+/* Let buttons size based on content */
+/* Don't set width on buttons */
+
+/* Use relative units for fonts */
+.text { font-size: 1.2em; }
+/* Or don't set font-size and use defaults */
+```
+
+**Results:**
+- Layouts adapt naturally to content
+- Elements look properly proportioned
+- Text scales correctly across devices
+- Respects user preferences
+
+### The Pattern to Recognize
+
+If you're writing CSS to force dimensions and encountering layout problems:
+
+1. **Stop adding more CSS** to "fix" it
+2. **Remove the size constraints** causing the problem
+3. **Let the browser calculate** natural dimensions
+4. **Only add back** minimal constraints if absolutely required
+
+**Most of the time, removing CSS produces better results than adding more CSS.**
+
+### When to Set Sizes
+
+Only force sizes when there's a genuine need:
+- Images/icons requiring exact dimensions
+- `max-width` for text readability (e.g., `max-width: 80ch`)
+- Specific design requirements (but question if they're necessary)
+
+Use modern layout tools:
+- **Flexbox** for flexible layouts with `gap`, `justify-content`, `align-items`
+- **Grid** for two-dimensional layouts with `grid-template-columns`, `gap`
+- **fit-content**, **auto**, **%** instead of fixed pixels
+
+### Real Examples from LED Strip Redesign (2026-01-28)
+
+All three of these problems were fixed by **removing CSS**, not adding more:
+
+1. `.controls { width: 285px; }` → cramped step progress bar → **removed width rule**
+2. `.button { width: 49%; }` → unnaturally wide buttons → **removed width rule**
+3. `.step { font-size: 16px; }` → doesn't scale → **changed to font-size: 1.5em**
+
 ## Debugging
 
 ```bash

src/css/tabs/led_strip.css

@@ -7,15 +7,19 @@
 
 .tab-led-strip .section {
     color: #565656;
-    margin: 20px 0 5px 0;
+    margin: 0 0 12px 0;
     border-bottom: 1px solid silver;
 }
 
+.tab-led-strip .gridColumn {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 2em;
+}
+
 .tab-led-strip .mainGrid {
     width: calc((24px + 7px) * 16);
     height: calc((24px + 7px) * 16);
-    float: left;
-    margin-right: 10px;
     border-radius: 3px;
     background-color: #dcdcdc;
     border: silver;
@@ -152,23 +156,19 @@
 }
 
 .tab-led-strip .wire {
-    color: rgba(255,255,255,.5);
+    color: rgba(255,255,255,1);
     text-align: center;
-    font-size: 12px;
-    text-shadow: 1px 1px rgba(0,0,0,.4);
+    font-size: 11px;
+    font-weight: bold;
+    text-shadow: 1px 1px rgba(0,0,0,.6);
     padding-top: 0;
     display: block;
-    /* font-family: monospace; */
     margin-left: -1px;
     margin-top: -21px;
     width: 24px;
     height: 24px;
 }
 
-.gridWire .wire {
-    color: rgba(255,255,255,1);
-}
-
 .gridWire {
     background: rgba(15, 171, 22, .5) !important;
 }
@@ -194,13 +194,6 @@
 }
 
 
-.tab-led-strip .w100 {
-    width: 100%;
-}
-
-.tab-led-strip .w50 {
-    width: 49%;
-}
 
 /* Drop-down boxes */
 
@@ -339,8 +332,8 @@
 
 .tab-led-strip .controls {
     position: relative;
-    float: left;
-    width: 285px;
+    display: inline-block;
+    vertical-align: top;
     margin-right: 10px;
 }
 
@@ -376,21 +369,17 @@
     width: 23%;
 }
 
-.tab-led-strip .wires-remaining {
-    float: right;
+.tab-led-strip .wires-placed {
     text-align: center;
     font-size: 14px;
+    margin: 6px 0;
+    color: #565656;
 }
 
-.tab-led-strip .wires-remaining div {
-    font-size: 40px;
+.tab-led-strip .wires-placed .placed-count {
+    font-size: 20px;
+    font-weight: bold;
     color: #ffbb00;
-    margin-bottom: -5px;
-    margin-top: -10px;
-}
-
-.tab-led-strip .wires-remaining.error div {
-    color: #FF5700;
 }
 
 .tab-led-strip > .buttons {
@@ -411,12 +400,115 @@
     width: 122px;
     height: 122px;
     float: left;
-    border: solid 1px rgb(236, 236, 236);
 }
 
 
 /*******JQUERYUI**********/
 
+
+/* Step Section Headers */
+.tab-led-strip .step-header {
+    color: #4a90d9 !important;
+    font-weight: bold !important;
+    border-bottom-color: #4a90d9 !important;
+    font-size: 1.3em;
+    margin-top: 1em;
+}
+
+.tab-led-strip .step-header .circle-number {
+    font-size: 1.6em;
+    font-weight: normal !important;
+}
+
+.tab-led-strip .step-instruction {
+    font-size: 0.95em;
+    color: #666;
+    margin: 8px 0;
+    padding: 6px 10px;
+    font-size: 0.8em;
+    border-radius: 3px;
+}
+
+/* Quick Layouts */
+.tab-led-strip .quick-layouts {
+    margin: 8px 0;
+}
+
+.tab-led-strip .quick-layouts .color_section {
+    display: block;
+    margin-bottom: 4px;
+    color: #565656;
+    font-size: 12px;
+}
+
+.tab-led-strip .quickLayout {
+    width: 31%;
+    font-size: 11px;
+    padding: 5px 3px;
+    margin-right: 2px;
+}
+
+.tab-led-strip .quickLayout:last-child {
+    margin-right: 0;
+}
+
+/* Placed counter */
+.tab-led-strip .wires-placed {
+    text-align: center;
+    font-size: 14px;
+    margin: 6px 0;
+    color: #565656;
+}
+
+.tab-led-strip .wires-placed .placed-count {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffbb00;
+}
+
+/* Wiring Controls under grid */
+.tab-led-strip .wiringControls {
+    display: flex;
+    gap: 8px;
+    margin: 8px 0;
+}
+
+/* Overlays Grid Layout */
+.tab-led-strip .overlays-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4px 8px;
+    margin-top: 4px;
+}
+
+/* Edit Palette Button */
+.tab-led-strip .editPalette {
+    margin-top: 6px;
+    background: #f5f5f5;
+    border: 1px dashed #aaa;
+    color: #565656;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.tab-led-strip .editPalette:hover {
+    background: #e8e8e8;
+    border-color: #888;
+}
+
+/* Clear Actions (at bottom) */
+.tab-led-strip .clear-actions {
+    margin-top: 10px;
+    border-top: 1px solid #ddd;
+    padding-top: 8px;
+}
+
+/* Grid: unwired cells get dashed border */
+.tab-led-strip .mainGrid .gPoint:not([class*="function"]) {
+    border-style: dashed;
+    border-color: #ccc;
+}
+
 .tab-led-strip .ui-selected {
     box-shadow: inset 0 0 8px rgba(255, 0, 255, 1) !important;
     border: solid 1px #000 !important;
@@ -432,4 +524,4 @@
     position: absolute;
     z-index: 100;
     border: 1px dotted white;
-}
+}