From ef44eab69fb62d28346178f671d7dea99e980a1e Mon Sep 17 00:00:00 2001
From: Roman Vyakhirev <roman.vyakhirev@mendix.com>
Date: Tue, 7 Jul 2026 13:05:34 +0200
Subject: [PATCH] chore: fix issue with previews not respecting min/max height
 settings

---
 .../pluggableWidgets/image-web/CHANGELOG.md   |  4 ++++
 .../image-web/src/Image.editorConfig.ts       | 22 ++++++++++++-------
 .../image-web/src/Image.editorPreview.tsx     | 17 +++++++++-----
 .../image-web/src/utils/helpers.ts            | 14 ++++++------
 4 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/packages/pluggableWidgets/image-web/CHANGELOG.md b/packages/pluggableWidgets/image-web/CHANGELOG.md
index 8bd533181d..874df3e573 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]
 
+### Fixed
+
+- We fixed an issue where previews in Design and Structure modes did not respect the configured minimum and maximum image height.
+
 ## [1.5.1] - 2025-10-29
 
 ### Fixed
diff --git a/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts b/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts
index 28e9f33846..a76f9930b3 100644
--- a/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts
+++ b/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts
@@ -1,9 +1,3 @@
-import {
-    DropZoneProps,
-    RowLayoutProps,
-    structurePreviewPalette,
-    StructurePreviewProps
-} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import {
     hidePropertiesIn,
     hidePropertyIn,
@@ -12,10 +6,15 @@ import {
     Properties,
     transformGroupsIntoTabs
 } from "@mendix/pluggable-widgets-tools";
-
+import {
+    DropZoneProps,
+    RowLayoutProps,
+    structurePreviewPalette,
+    StructurePreviewProps
+} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import { DatasourceEnum, ImagePreviewProps } from "../typings/ImageProps";
-import StructurePreviewImageSvg from "./assets/placeholder.svg";
 import StructurePreviewImageSvgDark from "./assets/placeholder-dark.svg";
+import StructurePreviewImageSvg from "./assets/placeholder.svg";
 
 type ImageViewPreviewPropsKey = keyof ImagePreviewProps;
 
@@ -202,6 +201,13 @@ export function getPreview(
         }
         if (values.heightUnit === "pixels" && values.height) {
             height = values.height;
+        } else if (values.heightUnit === "auto") {
+            // Mirror the min/max height constraints applied at runtime in constructStyleObject
+            if (values.maxHeightUnit === "pixels" && values.maxHeight) {
+                height = values.maxHeight;
+            } else if (values.minHeightUnit === "pixels" && values.minHeight) {
+                height = values.minHeight;
+            }
         }
         if (width || height) {
             return [width, height, previewImage];
diff --git a/packages/pluggableWidgets/image-web/src/Image.editorPreview.tsx b/packages/pluggableWidgets/image-web/src/Image.editorPreview.tsx
index d982f8ba97..3b33b89bff 100644
--- a/packages/pluggableWidgets/image-web/src/Image.editorPreview.tsx
+++ b/packages/pluggableWidgets/image-web/src/Image.editorPreview.tsx
@@ -1,10 +1,11 @@
-import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { WebIcon } from "mendix";
 import { ReactElement } from "react";
+import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { ImagePreviewProps } from "../typings/ImageProps";
-import { Image as ImageComponent } from "./components/Image/Image";
 
 import ImagePlaceholder from "./assets/placeholder.svg";
+import { Image as ImageComponent } from "./components/Image/Image";
+import { constructStyleObject } from "./utils/helpers";
 
 declare function require(name: string): string;
 
@@ -39,10 +40,16 @@ export function preview(props: ImagePreviewProps): ReactElement | null {
             break;
     }
 
+    const type = props.datasource === "icon" && props.imageIcon ? props.imageIcon.type : "image";
+
+    const styleObject = type === "image" && constructStyleObject(props);
+
+    const imageStyle = { ...parseStyle(props.style), ...styleObject };
+
     return (
         <ImageComponent
-            class={props.className}
-            style={parseStyle(props.style)}
+            class={props.class}
+            style={imageStyle}
             widthUnit={props.widthUnit}
             width={props.width ?? 100}
             heightUnit={props.heightUnit}
@@ -51,7 +58,7 @@ export function preview(props: ImagePreviewProps): ReactElement | null {
             responsive={props.responsive}
             onClickType={props.onClickType}
             onClick={undefined}
-            type={props.datasource === "icon" && props.imageIcon ? props.imageIcon.type : "image"}
+            type={type}
             image={image}
             displayAs={props.displayAs}
             renderAsBackground={props.datasource !== "icon" && props.isBackgroundImage}
diff --git a/packages/pluggableWidgets/image-web/src/utils/helpers.ts b/packages/pluggableWidgets/image-web/src/utils/helpers.ts
index a4510ffa12..47e1304e29 100644
--- a/packages/pluggableWidgets/image-web/src/utils/helpers.ts
+++ b/packages/pluggableWidgets/image-web/src/utils/helpers.ts
@@ -1,11 +1,11 @@
 import { CSSProperties } from "react";
-import { ImageContainerProps } from "typings/ImageProps";
+import { ImageContainerProps, ImagePreviewProps } from "typings/ImageProps";
 
 function getHeightScale(height: number, heightUnit: "pixels" | "percentage" | "viewport"): string {
     return `${height}${heightUnit === "pixels" ? "px" : heightUnit === "viewport" ? "vh" : "%"}`;
 }
 
-export function constructStyleObject(props: ImageContainerProps): CSSProperties {
+export function constructStyleObject(props: ImageContainerProps | ImagePreviewProps): CSSProperties {
     const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight } = props;
 
     const imageStyle: Pick<CSSProperties, "width" | "height" | "minHeight" | "maxHeight" | "maxWidth"> = {};
@@ -14,15 +14,15 @@ export function constructStyleObject(props: ImageContainerProps): CSSProperties
     if (heightUnit === "auto") {
         imageStyle.height = "auto";
 
-        if (minHeightUnit !== "none" && minHeight > 0) {
-            imageStyle.minHeight = getHeightScale(minHeight, minHeightUnit);
+        if (minHeightUnit !== "none" && minHeight! > 0) {
+            imageStyle.minHeight = getHeightScale(minHeight!, minHeightUnit);
         }
 
-        if (maxHeightUnit !== "none" && maxHeight > 0) {
-            imageStyle.maxHeight = getHeightScale(maxHeight, maxHeightUnit);
+        if (maxHeightUnit !== "none" && maxHeight! > 0) {
+            imageStyle.maxHeight = getHeightScale(maxHeight!, maxHeightUnit);
         }
     } else {
-        imageStyle.height = getHeightScale(height, heightUnit);
+        imageStyle.height = getHeightScale(height!, heightUnit);
     }
 
     return imageStyle;