From dcfca4732560c0dede18136c46f8eb7405adb034 Mon Sep 17 00:00:00 2001
From: Cintia Sanchez Garcia <cynthiasg@icloud.com>
Date: Tue, 6 Aug 2024 10:27:32 +0200
Subject: [PATCH] Adjust items sizes on embed for mobile devices

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
---
 ui/embed/src/common/StyleView.tsx | 35 +++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/ui/embed/src/common/StyleView.tsx b/ui/embed/src/common/StyleView.tsx
index 5e0a2f3a..1ee19d55 100644
--- a/ui/embed/src/common/StyleView.tsx
+++ b/ui/embed/src/common/StyleView.tsx
@@ -60,6 +60,34 @@ const CARD_SIZES: CardSizes = {
   },
 };
 
+const MOBILE_CARD_SIZES: CardSizes = {
+  [Size.XSmall]: {
+    width: '40px',
+    height: '36px',
+    gap: '3px',
+  },
+  [Size.Small]: {
+    width: '50px',
+    height: '45px',
+    gap: '5px',
+  },
+  [Size.Medium]: {
+    width: '70px',
+    height: '63px',
+    gap: '7px',
+  },
+  [Size.Large]: {
+    width: '90px',
+    height: '81px',
+    gap: '10px',
+  },
+  [Size.XLarge]: {
+    width: '105px',
+    height: '94px',
+    gap: '12px',
+  },
+};
+
 const Grid = styled('div')`
   --card-size-width: ${(props: GridProps) => CARD_SIZES[props.size].width};
   --card-size-height: ${(props: GridProps) => CARD_SIZES[props.size].height};
@@ -70,6 +98,13 @@ const Grid = styled('div')`
   gap: ${(props: GridProps) =>
     typeof props.spacing !== 'undefined' ? `${props.spacing}px` : CARD_SIZES[props.size].gap};
   justify-content: ${(props: GridProps) => props.alignment};
+
+  @media only screen and (max-width: 767.98px) {
+    --card-size-width: ${(props: GridProps) => MOBILE_CARD_SIZES[props.size].width};
+    --card-size-height: ${(props: GridProps) => MOBILE_CARD_SIZES[props.size].height};
+    gap: ${(props: GridProps) =>
+      typeof props.spacing !== 'undefined' ? `${props.spacing}px` : MOBILE_CARD_SIZES[props.size].gap};
+  }
 `;
 
 const ItemClass = css`