From feb9b5046141eb904b45f98e7f7b5099782c5576 Mon Sep 17 00:00:00 2001
From: divide29 <alexander@bischko.de>
Date: Fri, 10 Jan 2025 12:13:08 +0100
Subject: [PATCH] fix: min-height display behaviour

---
 .changeset/smooth-llamas-lay.md               |  5 +++++
 .../src/cms/useCmsElementImage.test.ts        | 21 ++++++++++++++++++-
 .../composables/src/cms/useCmsElementImage.ts | 16 ++++++++------
 3 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/smooth-llamas-lay.md

diff --git a/.changeset/smooth-llamas-lay.md b/.changeset/smooth-llamas-lay.md
new file mode 100644
index 000000000..6e1aa1960
--- /dev/null
+++ b/.changeset/smooth-llamas-lay.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": patch
+---
+
+fix: min-height display behaviour
diff --git a/packages/composables/src/cms/useCmsElementImage.test.ts b/packages/composables/src/cms/useCmsElementImage.test.ts
index 515cc04e9..edd75949d 100644
--- a/packages/composables/src/cms/useCmsElementImage.test.ts
+++ b/packages/composables/src/cms/useCmsElementImage.test.ts
@@ -5,9 +5,12 @@ import { useCmsElementImage } from "./useCmsElementImage";
 describe("useCmsElementImage", () => {
   describe("computed", () => {
     describe("containerStyle", () => {
-      it("should return minHeight css property", () => {
+      it("should return minHeight css property when displayMode is cover", () => {
         const { containerStyle } = useCmsElementImage({
           config: {
+            displayMode: {
+              value: "cover",
+            },
             minHeight: {
               value: "100px",
             },
@@ -16,6 +19,22 @@ describe("useCmsElementImage", () => {
 
         expect(containerStyle.value).toEqual({ minHeight: "100px" });
       });
+
+      it("should not return minHeight css property when displayMode is not cover", () => {
+        const { containerStyle } = useCmsElementImage({
+          config: {
+            displayMode: {
+              value: "contain",
+            },
+            minHeight: {
+              value: "100px",
+            },
+          },
+        } as CmsElementImage);
+
+        expect(containerStyle.value).toEqual({});
+      });
+
       it("should return anchorAttrs", () => {
         const { anchorAttrs } = useCmsElementImage({
           config: {
diff --git a/packages/composables/src/cms/useCmsElementImage.ts b/packages/composables/src/cms/useCmsElementImage.ts
index 8c0ebdf61..823645dcd 100644
--- a/packages/composables/src/cms/useCmsElementImage.ts
+++ b/packages/composables/src/cms/useCmsElementImage.ts
@@ -44,8 +44,16 @@ export function useCmsElementImage(
 ): UseCmsElementImage {
   const { getConfigValue } = useCmsElementConfig(element);
 
+  const displayMode = computed(
+    () => getConfigValue("displayMode") || "initial",
+  );
+
+  const minHeight = computed(() =>
+    displayMode.value === "cover" ? getConfigValue("minHeight") : undefined,
+  );
+
   const containerStyle: ComputedRef<CSSProperties> = computed(() => ({
-    minHeight: getConfigValue("minHeight"),
+    ...(minHeight.value !== undefined && { minHeight: minHeight.value }),
   }));
 
   const anchorAttrs = computed(() => ({
@@ -78,10 +86,6 @@ export function useCmsElementImage(
     srcset: getSrcSetForMedia(element.data?.media),
   }));
 
-  const displayMode = computed(
-    () => getConfigValue("displayMode") || "initial",
-  );
-
   const isVideoElement = computed(() => {
     return !!element.data?.media?.mimeType?.includes("video");
   });
@@ -91,12 +95,12 @@ export function useCmsElementImage(
   });
 
   return {
+    displayMode,
     containerStyle,
     anchorAttrs,
     imageAttrs,
     imageContainerAttrs,
     imageLink,
-    displayMode,
     isVideoElement,
     mimeType,
   };