From 22203fd8f4a9563892b4c5506ae41e67612f54c2 Mon Sep 17 00:00:00 2001
From: masoodafar-web <masoud.afarin.moghaddam@outlook.com>
Date: Wed, 18 Feb 2026 01:00:42 +0330
Subject: [PATCH] feat: make all product images 1:1 square ratio across both
 stores

- Store/Products.razor: aspect-ratio:1/1 instead of height:60%
- DiscountStore/Products.razor: same square ratio
- Store/ProductDetail.razor: aspect-ratio:1/1 instead of max-height:400px
- DiscountStore/ProductDetail.razor: ObjectFit.Cover + aspect-ratio:1/1
- Store/Cart.razor: rounded-lg instead of rounded-circle (desktop+mobile)
- Store/CheckoutSummary.razor: rounded-lg + ObjectFit.Cover
- Store/OrderDetail.razor: rounded-lg + ObjectFit.Cover (desktop+mobile)
- DiscountStore/Cart.razor: rounded-lg + ObjectFit.Cover (desktop+mobile)
- DiscountStore/Checkout.razor: rounded-lg + ObjectFit.Cover
---
 src/FrontOffice.Main/Pages/DiscountStore/Cart.razor          | 4 ++--
 src/FrontOffice.Main/Pages/DiscountStore/Checkout.razor      | 2 +-
 src/FrontOffice.Main/Pages/DiscountStore/ProductDetail.razor | 4 ++--
 src/FrontOffice.Main/Pages/DiscountStore/Products.razor      | 4 ++--
 src/FrontOffice.Main/Pages/Store/Cart.razor                  | 4 ++--
 src/FrontOffice.Main/Pages/Store/CheckoutSummary.razor       | 2 +-
 src/FrontOffice.Main/Pages/Store/OrderDetail.razor           | 4 ++--
 src/FrontOffice.Main/Pages/Store/ProductDetail.razor         | 2 +-
 src/FrontOffice.Main/Pages/Store/Products.razor              | 4 ++--
 9 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/FrontOffice.Main/Pages/DiscountStore/Cart.razor b/src/FrontOffice.Main/Pages/DiscountStore/Cart.razor
index 57a6683..23d468b 100644
--- a/src/FrontOffice.Main/Pages/DiscountStore/Cart.razor
+++ b/src/FrontOffice.Main/Pages/DiscountStore/Cart.razor
@@ -33,7 +33,7 @@
                             <MudTd>
                                 <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                     <AppImage Path="@GetImageUrl(context.ImageUrl)" Alt="@context.Title"
-                                              ImgWidth="64" ImgHeight="64" Class="product-thumb" />
+                                              ImgWidth="64" ImgHeight="64" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
                                     <MudText>@context.Title</MudText>
                                 </MudStack>
                             </MudTd>
@@ -82,7 +82,7 @@
                                 <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                     <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                         <AppImage Path="@GetImageUrl(item.ImageUrl)" Alt="@item.Title"
-                                                  ImgWidth="50" ImgHeight="50" Class="rounded-circle" />
+                                                  ImgWidth="50" ImgHeight="50" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
                                         <MudText Typo="Typo.subtitle2">@item.Title</MudText>
                                     </MudStack>
                                     <MudChip T="string" Color="Color.Error" Variant="Variant.Outlined" Size="Size.Small">
diff --git a/src/FrontOffice.Main/Pages/DiscountStore/Checkout.razor b/src/FrontOffice.Main/Pages/DiscountStore/Checkout.razor
index 079977b..949e630 100644
--- a/src/FrontOffice.Main/Pages/DiscountStore/Checkout.razor
+++ b/src/FrontOffice.Main/Pages/DiscountStore/Checkout.razor
@@ -80,7 +80,7 @@
                                     <MudStack Spacing="1">
                                         <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                             <AppImage Path="@GetImageUrl(item.ImageUrl)" Alt="@item.Title"
-                                                      ImgWidth="40" ImgHeight="40" Class="rounded-circle" />
+                                                      ImgWidth="40" ImgHeight="40" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
                                             <MudText Typo="Typo.subtitle2" Style="flex:1; margin:0 8px;">@item.Title</MudText>
                                             <MudText Typo="Typo.subtitle2">@FormatPrice(item.FinalPrice)</MudText>
                                         </MudStack>
diff --git a/src/FrontOffice.Main/Pages/DiscountStore/ProductDetail.razor b/src/FrontOffice.Main/Pages/DiscountStore/ProductDetail.razor
index 4d02723..0b582e4 100644
--- a/src/FrontOffice.Main/Pages/DiscountStore/ProductDetail.razor
+++ b/src/FrontOffice.Main/Pages/DiscountStore/ProductDetail.razor
@@ -24,8 +24,8 @@
             <MudItem xs="12" md="5">
                 <MudPaper Class="pa-2 rounded-xl" Elevation="1">
                     <AppImage Path="@_selectedImage" Alt="@_product.Title"
-                              ObjectFit="ObjectFit.Contain"
-                              Style="width:100%; max-height:400px; border-radius:12px;" />
+                              ObjectFit="ObjectFit.Cover"
+                              Style="width:100%; aspect-ratio:1/1; border-radius:12px;" />
 
                     @if (_product.Images.Count > 1)
                     {
diff --git a/src/FrontOffice.Main/Pages/DiscountStore/Products.razor b/src/FrontOffice.Main/Pages/DiscountStore/Products.razor
index 9c3c643..3527a69 100644
--- a/src/FrontOffice.Main/Pages/DiscountStore/Products.razor
+++ b/src/FrontOffice.Main/Pages/DiscountStore/Products.razor
@@ -77,9 +77,9 @@
                 <MudItem xs="6" sm="6" md="3"
                          onclick="@(() => NavigateToProduct(p.Id))">
                     <MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden"
-                             Style="cursor:pointer;height: 300px">
+                             Style="cursor:pointer;">
                         <MudCardContent Class="d-flex flex-column pa-1 h-100">
-                            <div style="height: 60%;background-image: url('@(string.IsNullOrWhiteSpace(p.ThumbnailUrl) ? "/images/product-placeholder.svg" : p.ThumbnailUrl)');background-size: cover; background-position: center;border-radius: 0.5rem; position: relative;">
+                            <div style="aspect-ratio:1/1;width:100%;background-image: url('@(string.IsNullOrWhiteSpace(p.ThumbnailUrl) ? "/images/product-placeholder.svg" : p.ThumbnailUrl)');background-size: cover; background-position: center;border-radius: 0.5rem; position: relative;">
                                 @if (p.RemainingCount <= 0)
                                 {
                                     <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;border-radius:0.5rem;">
diff --git a/src/FrontOffice.Main/Pages/Store/Cart.razor b/src/FrontOffice.Main/Pages/Store/Cart.razor
index 60f8a38..16234fd 100644
--- a/src/FrontOffice.Main/Pages/Store/Cart.razor
+++ b/src/FrontOffice.Main/Pages/Store/Cart.razor
@@ -31,7 +31,7 @@
                                 <MudStack Spacing="1">
                                     <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                         <AppImage Path="@GetProductImageUrl(context.ImageUrl)" Alt="@context.Title"
-                                                  ImgWidth="64" ImgHeight="64" Class="product-thumb" />
+                                                  ImgWidth="64" ImgHeight="64" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
                                         <MudText>@context.Title</MudText>
                                     </MudStack>
                                     @if (context.Discount > 0 || !string.IsNullOrWhiteSpace(context.Created) || !string.IsNullOrWhiteSpace(context.Description))
@@ -87,7 +87,7 @@
                                 <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                     <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                         <AppImage Path="@GetProductImageUrl(item.ImageUrl)" Alt="@item.Title"
-                                                  ImgWidth="50" ImgHeight="50" Class="rounded-circle" />
+                                                  ImgWidth="50" ImgHeight="50" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
                                         <MudText Typo="Typo.subtitle2">@item.Title</MudText>
                                     </MudStack>
                                     @if (item.Discount > 0)
diff --git a/src/FrontOffice.Main/Pages/Store/CheckoutSummary.razor b/src/FrontOffice.Main/Pages/Store/CheckoutSummary.razor
index 95d7974..b894fb3 100644
--- a/src/FrontOffice.Main/Pages/Store/CheckoutSummary.razor
+++ b/src/FrontOffice.Main/Pages/Store/CheckoutSummary.razor
@@ -86,7 +86,7 @@
                                     <MudStack Spacing="1">
                                         <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                             <AppImage Path="@GetProductImageUrl(item.ImageUrl)" Alt="@item.Title"
-                                                      ImgWidth="48" ImgHeight="48" Class="rounded-circle" />
+                                                      ImgWidth="48" ImgHeight="48" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
                                             <MudText Typo="Typo.subtitle2">@item.Title</MudText>
                                             <MudText Typo="Typo.subtitle2">@FormatPrice(item.LineTotal)</MudText>
                                         </MudStack>
diff --git a/src/FrontOffice.Main/Pages/Store/OrderDetail.razor b/src/FrontOffice.Main/Pages/Store/OrderDetail.razor
index 823f6a5..d94751d 100644
--- a/src/FrontOffice.Main/Pages/Store/OrderDetail.razor
+++ b/src/FrontOffice.Main/Pages/Store/OrderDetail.razor
@@ -47,7 +47,7 @@ else
                         <MudTd>
                             <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                 <AppImage Path="@GetProductImageUrl(context.ProductThumbnailPath)" Alt="@context.ProductTitle"
-                                          ImgWidth="60" ImgHeight="60" Class="rounded-circle" />
+                                          ImgWidth="60" ImgHeight="60" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
                                 <MudText>@context.ProductTitle</MudText>
                             </MudStack>
                         </MudTd>
@@ -66,7 +66,7 @@ else
                                 <MudStack Spacing="1">
                                     <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                         <AppImage Path="@GetProductImageUrl(it.ProductThumbnailPath)" Alt="@it.ProductTitle"
-                                                  ImgWidth="60" ImgHeight="60" Class="rounded-circle" />
+                                                  ImgWidth="60" ImgHeight="60" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
                                         <MudText>@it.ProductTitle</MudText>
                                     </MudStack>
                                     <MudStack Row="true" Justify="Justify.SpaceBetween">
diff --git a/src/FrontOffice.Main/Pages/Store/ProductDetail.razor b/src/FrontOffice.Main/Pages/Store/ProductDetail.razor
index 3426a9a..2b6a0a0 100644
--- a/src/FrontOffice.Main/Pages/Store/ProductDetail.razor
+++ b/src/FrontOffice.Main/Pages/Store/ProductDetail.razor
@@ -33,7 +33,7 @@ else
                     {
                         <AppImage Path="@MainImageUrl" Alt="@MainImageAlt"
                                   ObjectFit="ObjectFit.Cover"
-                                  Style="width:100%; max-height:400px; border-radius:12px;" />
+                                  Style="width:100%; aspect-ratio:1/1; border-radius:12px;" />
                     }
                     else
                     {
diff --git a/src/FrontOffice.Main/Pages/Store/Products.razor b/src/FrontOffice.Main/Pages/Store/Products.razor
index b3cdb04..370abbc 100644
--- a/src/FrontOffice.Main/Pages/Store/Products.razor
+++ b/src/FrontOffice.Main/Pages/Store/Products.razor
@@ -120,11 +120,11 @@
                 <MudItem xs="6" sm="6" md="3"
                          onclick="@(() => Navigation.NavigateTo($"{RouteConstants.Store.ProductDetail}{p.Id}"))">
                     <MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden"
-                             Style="cursor:pointer;height: 300px">
+                             Style="cursor:pointer;">
 
 
                         <MudCardContent Class="d-flex flex-column pa-1 h-100">
-                            <div style="height: 60%;background-image: url('@p.ImageUrl');background-size: cover; background-position: center;border-radius: 0.5rem; position: relative;">
+                            <div style="aspect-ratio:1/1;width:100%;background-image: url('@p.ImageUrl');background-size: cover; background-position: center;border-radius: 0.5rem; position: relative;">
                                 @if (p.RemainingCount <= 0)
                                 {
                                     <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;border-radius:0.5rem;">