Release v2.16.5: fix slide animation preview scaling

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.16.5 - 2026-10-22
+
+### Fixed
+
+- Slide animation previews scale to fit the modal's available width and height, matching the layout editor without cropping landscape or portrait canvases on desktop and mobile.
+
 ## 2.16.4 - 2026-10-22
 
 ### Changed

build/package.player.json

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

build/package.web.json

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pulse-signage",
-  "version": "2.16.4",
+  "version": "2.16.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-signage",
-      "version": "2.16.4",
+      "version": "2.16.5",
       "dependencies": {
         "animate.css": "^4.1.1",
         "bootstrap-icons": "1.13.1",

package.json

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

src/web/public/css/theme-custom.css

@@ -2489,18 +2489,25 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 }
 
 .slide-animation-preview-panel {
+  container-type: size;
   min-width: 0;
+  min-height: 0;
   display: flex;
-  flex-direction: column;
   align-items: center;
+  justify-content: center;
 }
 
 #slide-animation-preview {
   width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 #slide-animation-preview .slide-preview-stage {
-  width: 100%;
+  width: min(100%, calc(100cqh * var(--slide-layout-ratio, 1.777778)));
+  flex-shrink: 0;
 }
 
 .slide-animation-preview-panel [data-slide-animation-preview][aria-pressed="true"] {
@@ -2514,6 +2521,10 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .slide-animation-preview-panel {
+    height: min(55dvh, 32rem);
+  }
+
   .slide-animation-controls {
     overflow: visible;
   }

test/region-layout.test.js

@@ -268,6 +268,10 @@ test('layout and animation modals use the same preview and properties column siz
   assert.match(css, /\.slide-layout-body\s*\{[^}]*grid-template-columns:\s*minmax\(0,\s*1fr\)\s+21rem;/);
   assert.match(css, /\.slide-animation-body\s*\{[^}]*grid-template-columns:\s*minmax\(0,\s*1fr\)\s+21rem;/);
   assert.match(css, /\.slide-animation-body\s*\{[^}]*gap:\s*1\.25rem;/);
+  assert.match(css, /\.slide-animation-preview-panel\s*\{[^}]*container-type:\s*size;[^}]*min-height:\s*0;/);
+  assert.match(css, /#slide-animation-preview\s*\{[^}]*height:\s*100%;/);
+  assert.match(css, /#slide-animation-preview \.slide-preview-stage\s*\{[^}]*width:\s*min\(100%,\s*calc\(100cqh\s*\*\s*var\(--slide-layout-ratio,/);
+  assert.match(css, /@media \(max-width: 767\.98px\)[\s\S]*?\.slide-animation-preview-panel\s*\{[^}]*height:\s*min\(55dvh,\s*32rem\);/);
 });
 
 test('advanced animation section uses compact heading and card spacing', function () {