From 007270fce471830071c18429cfcd4a01dbc4c122 Mon Sep 17 00:00:00 2001
From: lumijiez <59575049+lumijiez@users.noreply.github.com>
Date: Sun, 29 Jun 2025 23:54:15 +0300
Subject: [PATCH] Fix desktop cards layout in the gallery

---
 ui/src/app/components/ImprinkAppBar.tsx       |  1 -
 ui/src/app/components/gallery/ProductCard.tsx | 18 +++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/components/ImprinkAppBar.tsx b/ui/src/app/components/ImprinkAppBar.tsx
index da6836a..a3ce8fc 100644
--- a/ui/src/app/components/ImprinkAppBar.tsx
+++ b/ui/src/app/components/ImprinkAppBar.tsx
@@ -215,7 +215,6 @@ export default function ImprinkAppBar() {
                             )}
                         </>
                     )}
-                    {/* Add theme toggle button to the right side of the toolbar on mobile */}
                     {isMobile && (
                         <Box sx={{ ml: 'auto' }}>
                             <ThemeToggleButton />
diff --git a/ui/src/app/components/gallery/ProductCard.tsx b/ui/src/app/components/gallery/ProductCard.tsx
index a9af034..c9ca6e7 100644
--- a/ui/src/app/components/gallery/ProductCard.tsx
+++ b/ui/src/app/components/gallery/ProductCard.tsx
@@ -34,12 +34,24 @@ export default function ProductCard({ product }: ProductCardProps) {
     return (
         <Card
             sx={{
-                width: {
+                minWidth: {
                     xs: 'calc(50% - 6px)',
                     sm: 'calc(50% - 8px)',
-                    lg: 'calc(33.333% - 12px)'
+                    md: '280px',
+                    lg: '320px'
+                },
+                flex: {
+                    xs: '0 0 calc(50% - 6px)',
+                    sm: '0 0 calc(50% - 8px)', 
+                    md: '1 1 280px',
+                    lg: '1 1 320px'
+                },
+                maxWidth: {
+                    xs: 'calc(50% - 6px)',
+                    sm: 'calc(50% - 8px)',
+                    md: 'none',
+                    lg: 'none'
                 },
-                maxWidth: { xs: 'none', sm: 280, lg: 320 },
                 height: { xs: 240, sm: 300, lg: 340 },
                 display: 'flex',
                 flexDirection: 'column',