Fix slide modal preview sizing

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.21.1 - 2026-10-26
+
+### Fixed
+
+- Slide layout and animation previews now resize to fill their modal workspace instead of retaining the editor sidebar preview dimensions.
+
 ## 2.21.0 - 2026-10-26
 
 ### Added

build/package.player.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-player",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "private": false,
   "description": "Pulse Signage player application bundle",
   "engines": {

build/package.web.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage-web",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "private": false,
   "description": "Pulse Signage web and bridge application bundle",
   "engines": {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pulse-signage",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-signage",
-      "version": "2.21.0",
+      "version": "2.21.1",
       "dependencies": {
         "@better-auth/passkey": "^1.7.13",
         "animate.css": "^4.1.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "private": false,
   "description": "Pulse Signage application with MySQL and media storage",
   "engines": {

src/web/public/js/slides/slide-form.js

@@ -792,7 +792,12 @@ import { createSlideAnimationEditor } from '/assets/js/slides/slide-animation-ed
     var containerStyle = window.getComputedStyle(stageContainer);
     var availableWidth = stageContainer.clientWidth - parseFloat(containerStyle.paddingLeft) - parseFloat(containerStyle.paddingRight);
     var maxHeight = parseFloat(window.getComputedStyle(slidePreviewStage).maxHeight);
-    if (!availableWidth || !Number.isFinite(maxHeight)) {
+    if (!Number.isFinite(maxHeight)) {
+      slidePreviewStage.style.removeProperty('width');
+      slidePreviewStage.style.removeProperty('margin-inline');
+      return;
+    }
+    if (!availableWidth) {
       return;
     }
 

test/slide-form-editor.test.js

@@ -116,6 +116,7 @@ test('slide preview shrinks proportionally without adding a nested scrollbar', (
 
   assert.match(stylesheet, /\.slide-editor-shell \.slide-preview-stage\s*\{[^}]*max-height:\s*max\(12rem,\s*calc\(100vh\s*-\s*22rem\)\);/s);
   assert.doesNotMatch(stylesheet, /\.slide-editor-shell \.slide-preview-scroll\s*\{[^}]*overflow:\s*auto;/s);
+  assert.match(slideFormSource, /if \(!Number\.isFinite\(maxHeight\)\)\s*\{\s*slidePreviewStage\.style\.removeProperty\('width'\);\s*slidePreviewStage\.style\.removeProperty\('margin-inline'\);\s*return;\s*\}/);
   assert.match(slideFormSource, /function sizePreviewStage\(canvasWidth, canvasHeight\)[\s\S]*?stageContainer\.clientWidth - parseFloat\(containerStyle\.paddingLeft\) - parseFloat\(containerStyle\.paddingRight\)[\s\S]*?Math\.min\(availableWidth, maxHeight \* canvasWidth \/ canvasHeight\)[\s\S]*?marginInline = 'auto'/);
 });