PINIO: update configurator for unified PINIO/PWM output

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

index.html

@@ -244,83 +244,174 @@
                     </li>
                 </ul>
                 <ul class="mode-connected">
-                    <li class="tab_setup">
-                        <a href="#" data-i18n="tabSetup" class="tabicon ic_setup" data-i18n_title="tabSetup"></a>
-                    </li>
-                    <li class="tab_calibration">
-                        <a href="#" data-i18n="tabCalibration" class="tabicon ic_calibration" title="Calibration"></a>
-                    </li>
-                    <li class="tab_mixer">
-                        <a href="#" data-i18n="tabMixer" class="tabicon ic_mixer" title="Mixer"></a>
-                    </li>
-                    <li class="tab_outputs">
-                        <a href="#" data-i18n="tabOutputs" class="tabicon ic_motor" title="Outputs"></a>
-                    </li>
-                    <li class="tab_ports">
-                        <a href="#" data-i18n="tabPorts" class="tabicon ic_ports" title="Ports"></a>
-                    </li>
-                    <li class="tab_configuration">
-                        <a href="#" data-i18n="tabConfiguration" class="tabicon ic_config" title="Configuration"></a>
-                    </li>
-                    <li class="tab_failsafe">
-                        <a href="#" data-i18n="tabFailsafe" class="tabicon ic_failsafe" title="Failsafe"></a>
-                    </li>
-                    <li class="tab_pid_tuning">
-                        <a href="#" data-i18n="tabPidTuning" class="tabicon ic_pid" data-i18n_title="tabPidTuning"></a>
-                    </li>
-                    <li class="tab_advanced_tuning">
-                        <a href="#" data-i18n="tabAdvancedTuning" class="tabicon ic_advanced"
-                            title="Advanced Tuning"></a>
-                    </li>
-                    <li class="tab_programming">
-                        <a href="#" data-i18n="tabProgramming" class="tabicon ic_config" title="Programming"></a>
-                    </li>
-                    <li class="tab_javascript_programming">
-                        <a href="#" i18n="tabJavaScriptProgramming" class="tabicon ic_javascript_programming" title="Javascript Programming">></a>
-                    </li>
-                    <li class="tab_receiver">
-                        <a href="#" data-i18n="tabReceiver" class="tabicon ic_rx" title="Receiver"></a>
-                    </li>
-                    <li class="tab_auxiliary">
-                        <a href="#" data-i18n="tabAuxiliary" class="tabicon ic_modes" title="Modes"></a>
-                    </li>
-                    <li class="tab_adjustments">
-                        <a href="#" data-i18n="tabAdjustments" class="tabicon ic_adjust" title="Adjustments"></a>
-                    </li>
-                    <li class="tab_gps">
-                        <a href="#" data-i18n="tabGPS" class="tabicon ic_gps" title="GPS"></a>
-                    </li>
-                    <li class="tab_magnetometer">
-                        <a href="#" data-i18n="tabMAGNETOMETER" class="tabicon ic_mag" title="MAGNETOMETER"></a>
-                    </li>
-                    <li class="tab_mission_control">
-                        <a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission"
-                            title="Mission Control"></a>
-                    </li>
-                    <li class="tab_osd">
-                        <a href="#" data-i18n="tabOSD" class="tabicon ic_osd" title="OSD"></a>
+                    <!-- Setup & Configuration -->
+                    <li class="nav-group">
+                        <div class="group-header" role="button" tabindex="0" aria-expanded="false">
+                            <span class="group-title" data-i18n="navGroupSetup">Setup & Configuration</span>
+                            <span class="chevron">▸</span>
+                        </div>
+                        <ul class="group-items">
+                            <li class="tab_setup">
+                                <a href="#" data-i18n="tabSetup" class="tabicon ic_setup" data-i18n_title="tabSetup"></a>
+                            </li>
+                            <li class="tab_calibration">
+                                <a href="#" data-i18n="tabCalibration" class="tabicon ic_calibration" title="Calibration"></a>
+                            </li>
+                            <li class="tab_magnetometer">
+                                <a href="#" data-i18n="tabMAGNETOMETER" class="tabicon ic_mag" title="MAGNETOMETER"></a>
+                            </li>
+                            <li class="tab_configuration">
+                                <a href="#" data-i18n="tabConfiguration" class="tabicon ic_config" title="Configuration"></a>
+                            </li>
+                            <li class="tab_ports">
+                                <a href="#" data-i18n="tabPorts" class="tabicon ic_ports" title="Ports"></a>
+                            </li>
+                        </ul>
                     </li>
-                    <li class="tab_led_strip">
-                        <a href="#" data-i18n="tabLedStrip" class="tabicon ic_led" title="LED Strip"></a>
+
+                    <!-- Flight Control -->
+                    <li class="nav-group">
+                        <div class="group-header" role="button" tabindex="0" aria-expanded="false">
+                            <span class="group-title" data-i18n="navGroupFlight">Flight Control</span>
+                            <span class="chevron">▸</span>
+                        </div>
+                        <ul class="group-items">
+                            <li class="tab_mixer">
+                                <a href="#" data-i18n="tabMixer" class="tabicon ic_mixer" title="Mixer"></a>
+                            </li>
+                            <li class="tab_outputs">
+                                <a href="#" data-i18n="tabOutputs" class="tabicon ic_motor" title="Outputs"></a>
+                            </li>
+                            <li class="tab_receiver">
+                                <a href="#" data-i18n="tabReceiver" class="tabicon ic_rx" title="Receiver"></a>
+                            </li>
+                            <li class="tab_auxiliary">
+                                <a href="#" data-i18n="tabAuxiliary" class="tabicon ic_modes" title="Modes"></a>
+                            </li>
+                            <li class="tab_failsafe">
+                                <a href="#" data-i18n="tabFailsafe" class="tabicon ic_failsafe" title="Failsafe"></a>
+                            </li>
+                        </ul>
                     </li>
-                    <li class="tab_sensors">
-                        <a href="#" data-i18n="tabRawSensorData" class="tabicon ic_sensors" title="Sensors"></a>
+
+                    <!-- Tuning -->
+                    <li class="nav-group">
+                        <div class="group-header" role="button" tabindex="0" aria-expanded="false">
+                            <span class="group-title" data-i18n="navGroupTuning">Tuning</span>
+                            <span class="chevron">▸</span>
+                        </div>
+                        <ul class="group-items">
+                            <li class="tab_pid_tuning">
+                                <a href="#" data-i18n="tabPidTuning" class="tabicon ic_pid" data-i18n_title="tabPidTuning"></a>
+                            </li>
+                            <li class="tab_advanced_tuning">
+                                <a href="#" data-i18n="tabAdvancedTuning" class="tabicon ic_advanced"
+                                    title="Advanced Tuning"></a>
+                            </li>
+                            <li class="tab_adjustments">
+                                <a href="#" data-i18n="tabAdjustments" class="tabicon ic_adjust" title="Adjustments"></a>
+                            </li>
+                        </ul>
                     </li>
-                    <li class="tab_logging">
-                        <a href="#" data-i18n="tabLogging" class="tabicon ic_log" title="Tethered Logging"></a>
+
+                    <!-- Navigation & Mission -->
+                    <li class="nav-group">
+                        <div class="group-header" role="button" tabindex="0" aria-expanded="false">
+                            <span class="group-title" data-i18n="navGroupNavigation">Navigation & Mission</span>
+                            <span class="chevron">▸</span>
+                        </div>
+                        <ul class="group-items">
+                            <li class="tab_gps">
+                                <a href="#" data-i18n="tabGPS" class="tabicon ic_gps" title="GPS"></a>
+                            </li>
+                            <li class="tab_mission_control">
+                                <a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission"
+                                    title="Mission Control"></a>
+                            </li>
+                        </ul>
                     </li>
-                    <li class="tab_onboard_logging">
-                        <a href="#" data-i18n="tabOnboardLogging" class="tabicon ic_data" title="Onboard Logging"></a>
+
+                    <!-- Sensors & Peripherals -->
+                    <li class="nav-group">
+                        <div class="group-header" role="button" tabindex="0" aria-expanded="false">
+                            <span class="group-title" data-i18n="navGroupSensors">Sensors & Peripherals</span>
+                            <span class="chevron">▸</span>
+                        </div>
+                        <ul class="group-items">
+                            <li class="tab_sensors">
+                                <a href="#" data-i18n="tabRawSensorData" class="tabicon ic_sensors" title="Sensors"></a>
+                            </li>
+                            <li class="tab_osd">
+                                <a href="#" data-i18n="tabOSD" class="tabicon ic_osd" title="OSD"></a>
+                            </li>
+                            <li class="tab_led_strip">
+                                <a href="#" data-i18n="tabLedStrip" class="tabicon ic_led" title="LED Strip"></a>
+                            </li>
+                        </ul>
                     </li>
-                    <li class="tab_cli">
-                        <a href="#" data-i18n="tabCLI" class="tabicon ic_cli" title="CLI"></a>
+
+                    <!-- Data Logging -->
+                    <li class="nav-group">
+                        <div class="group-header" role="button" tabindex="0" aria-expanded="false">
+                            <span class="group-title" data-i18n="navGroupLogging">Data Logging</span>
+                            <span class="chevron">▸</span>
+                        </div>
+                        <ul class="group-items">
+                            <li class="tab_onboard_logging">
+                                <a href="#" data-i18n="tabOnboardLogging" class="tabicon ic_data" title="Onboard Logging"></a>
+                            </li>
+                            <li class="tab_logging">
+                                <a href="#" data-i18n="tabLogging" class="tabicon ic_log" title="Tethered Logging"></a>
+                            </li>
+                        </ul>
                     </li>
-                    <li class="tab_search">
-                        <a href="#" data-i18n="search" class="tabicon ic_search" title="Search"></a>
+
+                    <!-- Programming -->
+                    <li class="nav-group">
+                        <div class="group-header" role="button" tabindex="0" aria-expanded="false">
+                            <span class="group-title" data-i18n="navGroupProgramming">Programming</span>
+                            <span class="chevron">▸</span>
+                        </div>
+                        <ul class="group-items">
+                            <li class="tab_programming">
+                                <a href="#" data-i18n="tabProgramming" class="tabicon ic_config" title="Programming"></a>
+                            </li>
+                            <li class="tab_javascript_programming">
+                                <a href="#" data-i18n="tabJavaScriptProgramming" class="tabicon ic_javascript_programming" title="Javascript Programming"></a>
+                            </li>
+                        </ul>
                     </li>
 
+                    <!-- Tools -->
+                    <li class="nav-group">
+                        <div class="group-header" role="button" tabindex="0" aria-expanded="false">
+                            <span class="group-title" data-i18n="navGroupTools">Tools</span>
+                            <span class="chevron">▸</span>
+                        </div>
+                        <ul class="group-items">
+                            <li class="tab_cli">
+                                <a href="#" data-i18n="tabCLI" class="tabicon ic_cli" title="CLI"></a>
+                            </li>
+                            <li class="tab_search">
+                                <a href="#" data-i18n="search" class="tabicon ic_search" title="Search"></a>
+                            </li>
+                        </ul>
+                    </li>
 
-                    <!-- <li class=""><a href="#" class="tabicon ic_advanced">Advanced (spare icon)</a></li> -->
+                    <!-- Expand/Collapse All Toggle -->
+                    <li class="nav-toggle-all">
+                        <a href="#" id="toggleAllGroups">
+                            <svg class="expand-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="expand-title">
+                                <title id="expand-title" data-i18n="navExpandAll">Expand All</title>
+                                <path d="M7 13l5 5 5-5M7 6l5 5 5-5" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                            <svg class="collapse-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" role="img" aria-labelledby="collapse-title" style="display: none;">
+                                <title id="collapse-title" data-i18n="navCollapseAll">Collapse All</title>
+                                <path d="M17 11l-5-5-5 5M17 18l-5-5-5 5" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                            <span class="toggle-text" data-i18n="navExpandAll">Expand All</span>
+                        </a>
+                    </li>
                 </ul>
             </div>
             <div class="clear-both"></div>