From c20678d98dedc95149fe2261c7163e2deb6d0e91 Mon Sep 17 00:00:00 2001
From: Roman Vyakhirev <roman.vyakhirev@mendix.com>
Date: Wed, 22 Jul 2026 14:31:53 +0200
Subject: [PATCH 1/2] fix(image-web): set default max height to 250px for new
 widgets

New Image widgets now default to a 250px maximum height instead of None.
Existing widgets with the old default are not affected.

Closes WC-3517
---
 packages/pluggableWidgets/image-web/CHANGELOG.md  | 4 ++++
 packages/pluggableWidgets/image-web/src/Image.xml | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/pluggableWidgets/image-web/CHANGELOG.md b/packages/pluggableWidgets/image-web/CHANGELOG.md
index 874df3e573..6eae03db07 100644
--- a/packages/pluggableWidgets/image-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/image-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We changed the default maximum height to 250 pixels for new Image widgets. Existing widgets are not affected.
+
 ### Fixed
 
 - We fixed an issue where previews in Design and Structure modes did not respect the configured minimum and maximum image height.
diff --git a/packages/pluggableWidgets/image-web/src/Image.xml b/packages/pluggableWidgets/image-web/src/Image.xml
index 5daaad62fe..f31738cc39 100644
--- a/packages/pluggableWidgets/image-web/src/Image.xml
+++ b/packages/pluggableWidgets/image-web/src/Image.xml
@@ -110,7 +110,7 @@
                     <caption>Minimum height</caption>
                     <description />
                 </property>
-                <property key="maxHeightUnit" type="enumeration" defaultValue="none">
+                <property key="maxHeightUnit" type="enumeration" defaultValue="pixels">
                     <caption>Maximum Height unit</caption>
                     <description />
                     <enumerationValues>
@@ -120,7 +120,7 @@
                         <enumerationValue key="viewport">Viewport</enumerationValue>
                     </enumerationValues>
                 </property>
-                <property key="maxHeight" type="integer" required="true" defaultValue="0">
+                <property key="maxHeight" type="integer" required="true" defaultValue="250">
                     <caption>Maximum height</caption>
                     <description />
                 </property>

From 8700c98ed6c4595cce006de10195f9dfe0e1ea22 Mon Sep 17 00:00:00 2001
From: leonardomendix <leonardo.de.souza@mendix.com>
Date: Mon, 27 Jul 2026 17:01:15 +0200
Subject: [PATCH 2/2] test(image-web): change button selector

---
 .../image-web/e2e/onClick.spec.js             | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/pluggableWidgets/image-web/e2e/onClick.spec.js b/packages/pluggableWidgets/image-web/e2e/onClick.spec.js
index 986f0f9bb9..713f62527d 100644
--- a/packages/pluggableWidgets/image-web/e2e/onClick.spec.js
+++ b/packages/pluggableWidgets/image-web/e2e/onClick.spec.js
@@ -5,36 +5,42 @@ test.describe("Image viewer", () => {
     const dynamicImage =
         "https://www.learningcontainer.com/wp-content/uploads/2020/08/Sample-png-Image-for-Testing.png";
 
+    const imageButton = (page, widgetClass) => page.locator(`${widgetClass} [role='button']`);
+
     test("triggers a Microflow on click", async ({ page }) => {
         await page.goto("/p/onClickMicroflow");
         await waitForMendixApp(page);
-        await page.click(".mx-name-image1");
-        const modalDialog = await page.locator(".modal-dialog");
+        await imageButton(page, ".mx-name-image1").click();
+        const modalDialog = page.locator(".modal-dialog");
+        await expect(modalDialog).toBeVisible();
         await expect(modalDialog).toContainText("You clicked this image");
     });
 
     test("triggers a Nanoflow on click", async ({ page }) => {
         await page.goto("/p/onClickNanoflow");
         await waitForMendixApp(page);
-        await page.click(".mx-name-image1");
-        const modalDialog = await page.locator(".modal-dialog");
+        await imageButton(page, ".mx-name-image1").click();
+        const modalDialog = page.locator(".modal-dialog");
+        await expect(modalDialog).toBeVisible();
         await expect(modalDialog).toContainText(dynamicImage);
     });
 
     test("opens a Page on click", async ({ page }) => {
         await page.goto("/p/onClickShowPage");
         await waitForMendixApp(page);
-        await page.click(".mx-name-image1");
-        const modalDialog = await page.locator(".modal-dialog");
-        const caption = await modalDialog.locator("#mxui_widget_Window_0_caption");
+        await imageButton(page, ".mx-name-image1").click();
+        const modalDialog = page.locator(".modal-dialog");
+        await expect(modalDialog).toBeVisible();
+        const caption = modalDialog.locator("#mxui_widget_Window_0_caption");
         await expect(caption).toContainText("GazaLand");
     });
 
     test("shows full screen image on click", async ({ page }) => {
         await page.goto("/p/onClickOpenFullScreen");
         await waitForMendixApp(page);
-        await page.click(".mx-name-imageRender1");
-        const lightboxImage = await page.locator(".mx-image-viewer-lightbox img");
+        await imageButton(page, ".mx-name-imageRender1").click();
+        const lightboxImage = page.locator(".mx-image-viewer-lightbox img");
+        await expect(lightboxImage).toBeVisible();
         await expect(lightboxImage).toHaveAttribute("src", /ImageViewer\$Images\$landscape_2\.png/);
     });
 });