From d5b217501ffb13fab499c56efbc11cf3f02786f3 Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Tue, 23 Sep 2025 14:48:30 +0200
Subject: [PATCH 1/3] fix: adjust icon container scaling and alignment issues

---
 packages/pluggableWidgets/image-web/CHANGELOG.md              | 4 ++++
 .../pluggableWidgets/image-web/src/components/Image/Image.tsx | 1 +
 .../pluggableWidgets/image-web/src/components/Image/ui.tsx    | 4 +++-
 .../components/__tests__/__snapshots__/Image.spec.tsx.snap    | 4 ++--
 packages/pluggableWidgets/image-web/src/ui/Image.scss         | 3 +++
 5 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/pluggableWidgets/image-web/CHANGELOG.md b/packages/pluggableWidgets/image-web/CHANGELOG.md
index 91deee3d0c..6d2ff1ddc9 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 showing icons as datasource would scale the icon container disproportionately and cause alignment issues.
+
 ## [1.5.0] - 2025-08-29
 
 ### Added
diff --git a/packages/pluggableWidgets/image-web/src/components/Image/Image.tsx b/packages/pluggableWidgets/image-web/src/components/Image/Image.tsx
index 4d290b25d7..8986301563 100644
--- a/packages/pluggableWidgets/image-web/src/components/Image/Image.tsx
+++ b/packages/pluggableWidgets/image-web/src/components/Image/Image.tsx
@@ -129,6 +129,7 @@ export const Image: FunctionComponent<ImageProps> = ({
         <ImageUi.Wrapper
             className={className}
             responsive={responsive}
+            type={type}
             hasImage={image !== undefined && image.length > 0}
         >
             {content}
diff --git a/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx b/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx
index 6542248746..0e38f37f51 100644
--- a/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx
+++ b/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx
@@ -19,6 +19,7 @@ export interface ImageWrapperProps {
     className?: string;
     responsive: boolean;
     hasImage: boolean;
+    type: string;
     children:
         | ReactElement<ImageContentIcon | ImageContentImage>
         | [ReactElement<ImageContentIcon | ImageContentImage>, ReactElement<LightboxProps> | false];
@@ -37,6 +38,7 @@ function Wrapper(props: ImageWrapperProps): ReactElement {
             className={classNames(
                 "mx-image-viewer",
                 { "mx-image-viewer-responsive": props.responsive },
+                { "mx-image-viewer-icon": props.type === "glyph" || props.type === "icon" },
                 props.className,
                 { hidden: !props.hasImage }
             )}
@@ -67,7 +69,7 @@ function ContentIcon(props: ImageContentIcon): ReactElement {
     return (
         <span
             className={classNames(props.icon, { glyphicon: props.isGlyph })}
-            style={{ ...props.style, fontSize: `${props.size}px` }}
+            style={{ fontSize: `${props.size}px` }}
             {...accessibilityProps}
             {...onClickProps}
         />
diff --git a/packages/pluggableWidgets/image-web/src/components/__tests__/__snapshots__/Image.spec.tsx.snap b/packages/pluggableWidgets/image-web/src/components/__tests__/__snapshots__/Image.spec.tsx.snap
index 7105b7bfe0..8fdceca35a 100644
--- a/packages/pluggableWidgets/image-web/src/components/__tests__/__snapshots__/Image.spec.tsx.snap
+++ b/packages/pluggableWidgets/image-web/src/components/__tests__/__snapshots__/Image.spec.tsx.snap
@@ -16,7 +16,7 @@ exports[`Image renders the structure as a background image 1`] = `
 exports[`Image renders the structure with a glyph icon 1`] = `
 <DocumentFragment>
   <div
-    class="mx-image-viewer mx-image-viewer-responsive"
+    class="mx-image-viewer mx-image-viewer-responsive mx-image-viewer-icon"
   >
     <span
       class="glyphicon-asterisk glyphicon"
@@ -30,7 +30,7 @@ exports[`Image renders the structure with a glyph icon 1`] = `
 exports[`Image renders the structure with an icon 1`] = `
 <DocumentFragment>
   <div
-    class="mx-image-viewer mx-image-viewer-responsive"
+    class="mx-image-viewer mx-image-viewer-responsive mx-image-viewer-icon"
   >
     <span
       class="mx-icon mx-icon-asterisk"
diff --git a/packages/pluggableWidgets/image-web/src/ui/Image.scss b/packages/pluggableWidgets/image-web/src/ui/Image.scss
index d02cadfaca..6fbec8e994 100644
--- a/packages/pluggableWidgets/image-web/src/ui/Image.scss
+++ b/packages/pluggableWidgets/image-web/src/ui/Image.scss
@@ -1,6 +1,9 @@
 .mx-image-viewer {
     width: 100%;
     height: 100%;
+    &-icon {
+        height: unset;
+    }
 }
 
 .mx-image-viewer-responsive img {

From df469da8ba4700f0bdaaea2b2d3e5127c026c9e2 Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Fri, 26 Sep 2025 14:06:29 +0200
Subject: [PATCH 2/3] fix: revert spread props in icons, conditionally apply
 style object to images only

---
 packages/pluggableWidgets/image-web/src/Image.tsx               | 2 +-
 packages/pluggableWidgets/image-web/src/components/Image/ui.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/pluggableWidgets/image-web/src/Image.tsx b/packages/pluggableWidgets/image-web/src/Image.tsx
index 02dc601e46..15c5ad3273 100644
--- a/packages/pluggableWidgets/image-web/src/Image.tsx
+++ b/packages/pluggableWidgets/image-web/src/Image.tsx
@@ -61,7 +61,7 @@ export const Image: FunctionComponent<ImageContainerProps> = props => {
     const { type, image } = getImageProps(props);
 
     const altText = props.alternativeText?.status === ValueStatus.Available ? props.alternativeText.value : undefined;
-    const styleObject = constructStyleObject(props);
+    const styleObject = type === "image" && constructStyleObject(props);
 
     const imageStyle = { ...props.style, ...styleObject };
 
diff --git a/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx b/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx
index 0e38f37f51..062e9dac25 100644
--- a/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx
+++ b/packages/pluggableWidgets/image-web/src/components/Image/ui.tsx
@@ -69,7 +69,7 @@ function ContentIcon(props: ImageContentIcon): ReactElement {
     return (
         <span
             className={classNames(props.icon, { glyphicon: props.isGlyph })}
-            style={{ fontSize: `${props.size}px` }}
+            style={{ ...props.style, fontSize: `${props.size}px` }}
             {...accessibilityProps}
             {...onClickProps}
         />

From 7be2bc56b42d07b831438580de65f6be1e2834ce Mon Sep 17 00:00:00 2001
From: Yordan <yordan.stoyanov@mendix.com>
Date: Wed, 15 Oct 2025 11:19:57 +0200
Subject: [PATCH 3/3] fix: hidden dimension properties for icon datasource

---
 .../pluggableWidgets/image-web/src/Image.editorConfig.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts b/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts
index 806521a99d..28e9f33846 100644
--- a/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts
+++ b/packages/pluggableWidgets/image-web/src/Image.editorConfig.ts
@@ -91,7 +91,14 @@ export function getProperties(
     }
 
     if (values.datasource === "icon" && (values.imageIcon?.type === "glyph" || values.imageIcon?.type === "icon")) {
-        hidePropertiesIn(defaultProperties, values, ["widthUnit", "width", "heightUnit", "height"]);
+        hidePropertiesIn(defaultProperties, values, [
+            "widthUnit",
+            "width",
+            "heightUnit",
+            "height",
+            "minHeightUnit",
+            "maxHeightUnit"
+        ]);
     } else {
         hidePropertyIn(defaultProperties, values, "iconSize");
     }