changed grid size

swiss-ai-center · Nov 28, 2023 · 87b0e60 · 87b0e60
1 parent e91c122
commit 87b0e60
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/webapp/src/components/ItemGrid/ItemGrid.tsx b/webapp/src/components/ItemGrid/ItemGrid.tsx
@@ -234,8 +234,8 @@ const ItemGrid: React.FC<{
                     ) : (
                         services.map((item: any, index: number) => {
                             return (
-                                <Grid xs={12} sm={6} xl={4} key={index}
-                                      sx={{height: 'auto', minHeight: '200px'}}>
+                                <Grid xs={12} sm={6} lg={4} xl={3} key={index}
+                                      sx={{height: 'auto', minHeight: '250px'}}>
                                     <Card
                                         sx={{height: '100%', display: 'flex', flexDirection: 'column'}}
                                     >
@@ -307,8 +307,7 @@ const ItemGrid: React.FC<{
                                         </CardActions>
                                     </Card>
                                 </Grid>
-                            )
-                                ;
+                            );
                         }))}
                 </Grid>
             }
@@ -323,7 +322,7 @@ const ItemGrid: React.FC<{
             {!isReady ?
                 <LoadingGrid/>
                 :
-                <Grid container spacing={3}>
+                <Grid container spacing={isSmartphone() ? 2 : 3}>
                     {pipelines.length === 0 ? (
                         <Grid xs={6} md={8}>
                             <Typography gutterBottom variant={"h6"} component={"h2"}>
@@ -333,8 +332,8 @@ const ItemGrid: React.FC<{
                     ) : (
                         pipelines.map((item: any, index: number) => {
                             return (
-                                <Grid xs={12} sm={6} xl={4} key={index}
-                                      sx={{height: 'auto', minHeight: '200px'}}>
+                                <Grid xs={12} sm={6} lg={4} xl={3} key={index}
+                                      sx={{height: 'auto', minHeight: '250px'}}>
                                     <Card
                                         sx={{height: '100%', display: 'flex', flexDirection: 'column'}}
                                     >

diff --git a/webapp/src/components/LoadingGrid/LoadingGrid.tsx b/webapp/src/components/LoadingGrid/LoadingGrid.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
-import { Skeleton, Card, Grid, CardContent, CardActions } from "@mui/material";
+import { Skeleton, Card, CardContent, CardActions } from "@mui/material";
+import Grid from '@mui/material/Unstable_Grid2';
+import { isSmartphone } from '../../utils/functions';
 
 
 const LoadingGrid: React.FC = () => {
 
     return (
-        <Grid container spacing={4}>
-            {Array.from(new Array(3)).map((_, index) => (
-                <Grid item xs={12} sm={6} xl={4} sx={{height: 'auto', minHeight: '200px'}} key={index}>
+        <Grid container spacing={isSmartphone() ? 2 : 3}>
+            {Array.from(new Array(4)).map((_, index) => (
+                <Grid xs={12} sm={6} lg={4} xl={3} sx={{height: 'auto', minHeight: '250px'}} key={index}>
                     <Card sx={{height: '100%', display: 'flex', flexDirection: 'column'}}>
-                        <CardContent>
+                        <CardContent sx={{flexGrow: 1}}>
                             <Skeleton variant={"rounded"} width={"60%"} height={32}/>
                             <Skeleton variant={"rounded"} width={"10%"} height={28} sx={{my: 2}}/>
                             <Skeleton variant={"text"} width={"80%"}/>