From 0ff637ffe1abcbc6361fc5854a902b3237a25be5 Mon Sep 17 00:00:00 2001
From: LeRatierBretonnier <sylvain@lahiette.com>
Date: Mon, 25 May 2026 13:55:20 +0200
Subject: [PATCH] Add new resolution drop-down select

---
 src/ui/gm/DirectorsBoard.js          | 21 +++++++++++++++------
 src/ui/gm/ScryingPoolStrip.js        |  5 +++--
 styles/components/_roster-strip.less |  4 ++--
 styles/scrying-pool.css              |  4 ++--
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/ui/gm/DirectorsBoard.js b/src/ui/gm/DirectorsBoard.js
index fdca2ca..06f7566 100644
--- a/src/ui/gm/DirectorsBoard.js
+++ b/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)
diff --git a/src/ui/gm/ScryingPoolStrip.js b/src/ui/gm/ScryingPoolStrip.js
index 0bdde16..ce9b88b 100644
--- a/src/ui/gm/ScryingPoolStrip.js
+++ b/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;
 
diff --git a/styles/components/_roster-strip.less b/styles/components/_roster-strip.less
index e1d379d..703b478 100644
--- a/styles/components/_roster-strip.less
+++ b/styles/components/_roster-strip.less
@@ -86,11 +86,11 @@
 }
 
 .scrying-pool.scrying-pool-strip.sp-layout-mosaic-sm .sp-strip__participants {
-  grid-template-columns: repeat(auto-fill, 83px);
+  grid-template-columns: repeat(auto-fill, var(--sp-widget-width, 83px));
 }
 
 .scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-strip__participants {
-  grid-template-columns: repeat(auto-fill, 150px);
+  grid-template-columns: repeat(auto-fill, var(--sp-widget-width, 150px));
 }
 
 // ── Medium tile size for horizontal / mosaic ─────────────────────────────────
diff --git a/styles/scrying-pool.css b/styles/scrying-pool.css
index 495c218..ae78840 100644
--- a/styles/scrying-pool.css
+++ b/styles/scrying-pool.css
@@ -524,10 +524,10 @@
   gap: 4px;
 }
 .scrying-pool.scrying-pool-strip.sp-layout-mosaic-sm .sp-strip__participants {
-  grid-template-columns: repeat(auto-fill, 83px);
+  grid-template-columns: repeat(auto-fill, var(--sp-widget-width, 83px));
 }
 .scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-strip__participants {
-  grid-template-columns: repeat(auto-fill, 150px);
+  grid-template-columns: repeat(auto-fill, var(--sp-widget-width, 150px));
 }
 .scrying-pool.scrying-pool-strip.sp-layout-horizontal-md .sp-participant-avatar,
 .scrying-pool.scrying-pool-strip.sp-layout-mosaic-md .sp-participant-avatar {