From 5b5d5da5113dfff331ac7b0f57df55082e2de63e Mon Sep 17 00:00:00 2001
From: Mark Rapson <git@lzstealth.com>
Date: Thu, 22 Oct 2026 16:19:06 +0100
Subject: [PATCH] Release v2.16.5: fix slide animation preview scaling

---
 CHANGELOG.md                        |  6 ++++++
 build/package.player.json           |  2 +-
 build/package.web.json              |  2 +-
 package-lock.json                   |  4 ++--
 package.json                        |  2 +-
 src/web/public/css/theme-custom.css | 15 +++++++++++++--
 test/region-layout.test.js          |  4 ++++
 7 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75bf0d1..77ada71 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/build/package.player.json b/build/package.player.json
index ee95ea7..d52498c 100644
--- a/build/package.player.json
+++ b/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": {
diff --git a/build/package.web.json b/build/package.web.json
index d887202..18d3290 100644
--- a/build/package.web.json
+++ b/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": {
diff --git a/package-lock.json b/package-lock.json
index 0e7536b..88b5ada 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index ee636eb..5169721 100644
--- a/package.json
+++ b/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": {
diff --git a/src/web/public/css/theme-custom.css b/src/web/public/css/theme-custom.css
index 4c184f3..e4dd03b 100644
--- a/src/web/public/css/theme-custom.css
+++ b/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;
   }
diff --git a/test/region-layout.test.js b/test/region-layout.test.js
index 480e32d..dc4d8ac 100644
--- a/test/region-layout.test.js
+++ b/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 () {