Story 5.2: Video Widget Width Customization

Implements configurable video widget widths for small and large dock layouts:
- Add widgetWidthSm and widgetWidthMd world settings (defaults: 83px, 150px)
- Add width dropdown selectors in Director's Board UI
- Apply width settings to participant avatars via CSS custom properties
- Update strip width/height calculations to use custom widths
- Add localization strings for widget width settings
- Add CSS styling for widget width dropdown controls
- Fix Handlebars template syntax for select element selected values

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

templates/directors-board.hbs

@@ -78,6 +78,29 @@
     </div>
   </div>
 
+  {{!-- Story 5.2: Video widget width customization --}}
+  <div class="directors-board__widget-width-bar" role="toolbar" aria-label="{{localize 'scrying-pool.directorsBoard.widgetWidth.label'}}">
+    <span class="directors-board__widget-width-label">{{localize "scrying-pool.directorsBoard.widgetWidth.label"}}</span>
+    <div class="directors-board__widget-width-group">
+      <div class="directors-board__widget-width-row">
+        <span>{{localize "scrying-pool.directorsBoard.widgetWidth.small"}}</span>
+        <select class="directors-board__widget-width-select" data-action="set-widget-width-sm" data-selected="{{widgetWidthSm}}">
+          {{#each widthOptions}}
+            <option value="{{this.value}}">{{this.label}}</option>
+          {{/each}}
+        </select>
+      </div>
+      <div class="directors-board__widget-width-row">
+        <span>{{localize "scrying-pool.directorsBoard.widgetWidth.large"}}</span>
+        <select class="directors-board__widget-width-select" data-action="set-widget-width-md" data-selected="{{widgetWidthMd}}">
+          {{#each widthOptions}}
+            <option value="{{this.value}}">{{this.label}}</option>
+          {{/each}}
+        </select>
+      </div>
+    </div>
+  </div>
+
   <footer class="directors-board__footer">
     <div class="directors-board__footer-group directors-board__footer-group--presets">
       <button type="button" class="directors-board__footer-btn" data-action="save-preset"

templates/roster-strip.hbs

@@ -41,7 +41,7 @@
   </div>
 
   {{!-- Participant list --}}
-  <ul class="sp-strip__participants" role="list">
+  <ul class="sp-strip__participants" role="list" style="--sp-widget-width: {{widgetWidth}}px;">
     {{#if isEmpty}}
       {{!-- EmptyStatePanel --}}
       <li class="sp-strip__empty-state" role="listitem">
@@ -58,7 +58,7 @@
                   role="button"
                   aria-label="{{name}} — {{stateLabel}}"
                   data-tooltip="{{name}} — {{stateLabel}}"
-                  aria-pressed="false">
+                  aria-pressed="false" style="width: {{../widgetWidth}}px; min-width: {{../widgetWidth}}px;">
 
             {{!-- Video container for stream-access mode (full AV replacement) --}}
             {{#if hasStreamAccess}}