From b03396e175ed82181ce2af96788a94bcde5d2e9e Mon Sep 17 00:00:00 2001
From: Carlos Cano <carlos@alkem.io>
Date: Fri, 15 Nov 2024 15:11:05 +0100
Subject: [PATCH] Also fix the mobile view of the bottom cards

---
 .../DashboardInnovationPacks/InnovationPacksView.tsx  |  7 +++++--
 .../LibraryTemplatesView.tsx                          | 11 +++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/domain/InnovationPack/DashboardInnovationPacks/InnovationPacksView.tsx b/src/domain/InnovationPack/DashboardInnovationPacks/InnovationPacksView.tsx
index b972b0ae94..77f8be28a8 100644
--- a/src/domain/InnovationPack/DashboardInnovationPacks/InnovationPacksView.tsx
+++ b/src/domain/InnovationPack/DashboardInnovationPacks/InnovationPacksView.tsx
@@ -11,6 +11,8 @@ import { Box, Button, Theme, useMediaQuery } from '@mui/material';
 import { CONTRIBUTE_CARD_COLUMNS } from '../../../core/ui/card/ContributeCard';
 import GridItem from '../../../core/ui/grid/GridItem';
 import { Skeleton } from '@mui/material';
+import { gutters } from '../../../core/ui/grid/utils';
+import { useTheme } from '@mui/styles';
 
 interface InnovationPacksViewProps extends PageContentBlockProps {
   filter: string[];
@@ -37,6 +39,7 @@ const InnovationPacksView = ({
   ...props
 }: InnovationPacksViewProps) => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const isMobile = useMediaQuery<Theme>(theme => theme.breakpoints.down('sm'));
 
   return (
@@ -54,8 +57,8 @@ const InnovationPacksView = ({
           ? Array.from({ length: isMobile ? 2 : 5 }).map((_, idx) => (
               <Skeleton
                 key={idx}
-                width={240}
-                height={300}
+                width={gutters(12)(theme)}
+                height={gutters(13)(theme)}
                 animation="pulse"
                 variant="rectangular"
                 sx={{ borderRadius: 1 }}
diff --git a/src/domain/InnovationPack/DashboardLibraryTemplates/LibraryTemplatesView.tsx b/src/domain/InnovationPack/DashboardLibraryTemplates/LibraryTemplatesView.tsx
index cd8362d25e..4c27a6bb01 100644
--- a/src/domain/InnovationPack/DashboardLibraryTemplates/LibraryTemplatesView.tsx
+++ b/src/domain/InnovationPack/DashboardLibraryTemplates/LibraryTemplatesView.tsx
@@ -13,6 +13,8 @@ import TemplateTypeFilterMobile from './TemplateTypeFilterMobile';
 import { TemplateType } from '../../../core/apollo/generated/graphql-schema';
 import TemplateCard from '../../templates/components/cards/TemplateCard';
 import { AnyTemplate, AnyTemplateWithInnovationPack } from '../../templates/models/TemplateBase';
+import { gutters } from '../../../core/ui/grid/utils';
+import { useTheme } from '@mui/styles';
 
 export interface LibraryTemplatesFilter {
   templateTypes: TemplateType[];
@@ -47,6 +49,7 @@ const LibraryTemplatesView = ({
 }: Omit<PageContentBlockProps, 'onClick'> & LibraryTemplatesViewProps) => {
   const { t } = useTranslation();
   const isMobile = useMediaQuery<Theme>(theme => theme.breakpoints.down('sm'));
+  const theme = useTheme();
 
   return (
     <PageContentBlock {...props}>
@@ -90,11 +93,11 @@ const LibraryTemplatesView = ({
 
       <ScrollableCardsLayoutContainer minHeight={0} orientation={expanded ? 'vertical' : undefined} sameHeight>
         {loading
-          ? Array.from({ length: 5 }).map((_, idx) => (
+          ? Array.from({ length: isMobile ? 2 : 5 }).map((_, idx) => (
               <Skeleton
                 key={idx}
-                width={248}
-                height={262}
+                width={gutters(12)(theme)}
+                height={gutters(13)(theme)}
                 animation="pulse"
                 variant="rectangular"
                 sx={{ borderRadius: 1 }}
@@ -109,7 +112,7 @@ const LibraryTemplatesView = ({
               />
             ))}
 
-        {isMobile && hasMore && (
+        {isMobile && !loading && hasMore && (
           <GridItem columns={CONTRIBUTE_CARD_COLUMNS}>
             <Box
               sx={{