From f45b4916d5e043451bf58696a9b77c5d50cd3070 Mon Sep 17 00:00:00 2001
From: nobswebdev <nobswebdev@noreply.git.nobswebdev.com>
Date: Fri, 28 Aug 2026 19:18:43 +0200
Subject: [PATCH] fix sf procuct detail page main image display

---
 .../storefrontCore/public/css/storefront.css   | 13 ++++++++++---
 .../views/partials/variant-image-gallery.hbs   | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/backend/src/modules/storefrontCore/public/css/storefront.css b/backend/src/modules/storefrontCore/public/css/storefront.css
index 4bd4286..5e7c616 100644
--- a/backend/src/modules/storefrontCore/public/css/storefront.css
+++ b/backend/src/modules/storefrontCore/public/css/storefront.css
@@ -1051,14 +1051,21 @@ a:hover {
     }
 }
 
-.sf-product-gallery__main {
+.sf-product-gallery__media {
     display: block;
     width: 100%;
     aspect-ratio: 1;
-    object-fit: cover;
+    background: var(--sf-surface-muted);
     border-radius: var(--sf-radius);
     border: 1px solid var(--sf-border);
-    background: var(--sf-surface-muted);
+    overflow: hidden;
+}
+
+.sf-product-gallery__main {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 .sf-product-gallery__thumbs {
diff --git a/backend/src/modules/storefrontCore/views/partials/variant-image-gallery.hbs b/backend/src/modules/storefrontCore/views/partials/variant-image-gallery.hbs
index ac27481..c55762e 100644
--- a/backend/src/modules/storefrontCore/views/partials/variant-image-gallery.hbs
+++ b/backend/src/modules/storefrontCore/views/partials/variant-image-gallery.hbs
@@ -1,13 +1,15 @@
 {{#if selectedImageUrl}}
     <div class='sf-product-gallery'>
-        {{> storefront-image
-            class='sf-product-gallery__main'
-            src=selectedImageUrl
-            alt=productTitle
-            width='1'
-            height='1'
-            fetchPriority='high'
-        }}
+        <div class='sf-product-gallery__media'>
+            {{> storefront-image
+                class='sf-product-gallery__main'
+                src=selectedImageUrl
+                alt=productTitle
+                width='1'
+                height='1'
+                fetchPriority='high'
+            }}
+        </div>
 
         {{#if galleryImages}}
             {{#if (gt galleryImages.length 1)}}