Add new resolution drop-down select

src/ui/gm/DirectorsBoard.js

@@ -379,8 +379,9 @@ export class DirectorsBoard extends _AppBase {
     }));
 
     // Story 5.2: Video widget width customization
-    const widgetWidthSm = this._adapter.settings?.get?.('widgetWidthSm') ?? '80';
-    const widgetWidthMd = this._adapter.settings?.get?.('widgetWidthMd') ?? '120';
+    // Defaults match the settings registration in module.js
+    const widgetWidthSm = this._adapter.settings?.get?.('widgetWidthSm') ?? '83';
+    const widgetWidthMd = this._adapter.settings?.get?.('widgetWidthMd') ?? '150';
     const WIDTH_OPTIONS = [
       { value: '60', label: '60px' },
       { value: '80', label: '80px' },
@@ -483,13 +484,21 @@ export class DirectorsBoard extends _AppBase {
     root.addEventListener('keydown', this._keydownHandler);
 
     // Story 5.2: Set selected values on widget width dropdowns
+    // Get current values from settings to ensure they're up to date
+    const currentSm = this._adapter.settings?.get?.('widgetWidthSm') ?? '83';
+    const currentMd = this._adapter.settings?.get?.('widgetWidthMd') ?? '150';
+    
     const smSelect = root.querySelector('select[data-action="set-widget-width-sm"]');
-    if (smSelect && context?.widgetWidthSm) {
-      smSelect.value = context.widgetWidthSm;
+    if (smSelect) {
+      smSelect.value = currentSm;
+      // Add change handler for direct select interaction
+      smSelect.addEventListener('change', () => this._onSetWidgetWidth(smSelect.value, 'sm'));
     }
     const mdSelect = root.querySelector('select[data-action="set-widget-width-md"]');
-    if (mdSelect && context?.widgetWidthMd) {
-      mdSelect.value = context.widgetWidthMd;
+    if (mdSelect) {
+      mdSelect.value = currentMd;
+      // Add change handler for direct select interaction
+      mdSelect.addEventListener('change', () => this._onSetWidgetWidth(mdSelect.value, 'md'));
     }
 
     // Drag grip — custom drag (ApplicationV2 header is hidden)

src/ui/gm/ScryingPoolStrip.js

@@ -216,8 +216,9 @@ export class ScryingPoolStrip extends _AppBase {
     const showName = dockLayout.endsWith('-md');
 
     // Story 5.2: Video widget width customization
-    const widgetWidthSm = this._adapter.settings?.get?.('widgetWidthSm') ?? '80';
-    const widgetWidthMd = this._adapter.settings?.get?.('widgetWidthMd') ?? '120';
+    // Defaults match settings registration in module.js: 83px for sm, 150px for md
+    const widgetWidthSm = this._adapter.settings?.get?.('widgetWidthSm') ?? '83';
+    const widgetWidthMd = this._adapter.settings?.get?.('widgetWidthMd') ?? '150';
     const isLarge = effectiveSize === 'md';
     const effectiveWidth = isLarge ? widgetWidthMd : widgetWidthSm;