Also fix the mobile view of the bottom cards

alkem-io · Nov 15, 2024 · b03396e · b03396e
1 parent c47ccd2
commit b03396e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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={{