From 9e865bcae91c13a746baa155ec9c3b5b81bbc7a7 Mon Sep 17 00:00:00 2001
From: Mark Rapson <git@lzstealth.com>
Date: Mon, 26 Oct 2026 21:59:58 +0000
Subject: [PATCH] Fix responsive image-region preview spacing

---
 src/web/public/css/theme-custom.css | 6 ++++++
 test/media-library.test.js          | 9 +++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/web/public/css/theme-custom.css b/src/web/public/css/theme-custom.css
index 8ec50d6..e69639f 100644
--- a/src/web/public/css/theme-custom.css
+++ b/src/web/public/css/theme-custom.css
@@ -3330,6 +3330,12 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 
 .slide-image-region-preview-tools > .slide-image-region-preview-box {
   min-width: 0;
+  justify-items: stretch;
+}
+
+.slide-image-region-preview-tools .slide-image-region-preview-shell,
+.slide-image-region-preview-tools .slide-image-region-preview {
+  max-width: none;
 }
 
 .slide-image-region-crop {
diff --git a/test/media-library.test.js b/test/media-library.test.js
index facf9f2..d8ecdff 100644
--- a/test/media-library.test.js
+++ b/test/media-library.test.js
@@ -294,6 +294,15 @@ test('regenerated crop pixels preserve cropper rotation and flips', async () =>
   }
 });
 
+test('image crop preview fills its responsive column without right-aligned thumbnail padding', () => {
+  const stylesheet = fs.readFileSync(path.join(__dirname, '../src/web/public/css/theme-custom.css'), 'utf8');
+  const box = stylesheet.match(/^\.slide-image-region-preview-tools > \.slide-image-region-preview-box\s*\{([^}]+)\}/m);
+  assert.ok(box);
+  assert.match(box[1], /min-width:\s*0;/);
+  assert.match(box[1], /justify-items:\s*stretch;/);
+  assert.match(stylesheet, /\.slide-image-region-preview-tools \.slide-image-region-preview-shell,\s*\.slide-image-region-preview-tools \.slide-image-region-preview\s*\{\s*max-width:\s*none;/);
+});
+
 test('editor offers the cropper and player uses the crop copy while retaining original metadata', () => {
   const modules = {};
   const browserWindow = {