[grid] Fix alignment after Material UI v5 upgrade

diemol · diemol · commit ba09b6bbdb7b · 2022-04-20T16:52:42.000+02:00
[skip ci]
diff --git a/javascript/grid-ui/src/components/EnhancedTableToolbar.tsx b/javascript/grid-ui/src/components/EnhancedTableToolbar.tsx
@@ -24,6 +24,7 @@ function EnhancedTableToolbar (props) {
   return (
     <Toolbar sx={{ paddingLeft: 2, paddingRight: 1 }}>
       <Typography
+        textAlign={'center'}
         sx={{ flex: '1 1 100%' }}
         variant="h3"
         id="tableTitle"
diff --git a/javascript/grid-ui/src/components/NoData/NoData.tsx b/javascript/grid-ui/src/components/NoData/NoData.tsx
@@ -37,7 +37,8 @@ function NoData (props) {
           <Typography
             align='center'
             color='textPrimary'
-            variant='h1'
+            variant="h1"
+            paddingBottom={1}
           >
             {message}
           </Typography>
diff --git a/javascript/grid-ui/src/screens/Overview/Overview.tsx b/javascript/grid-ui/src/screens/Overview/Overview.tsx
@@ -107,11 +107,20 @@ function Overview () {
     }
 
     return (
-      <Grid container spacing={3}>
+      <Grid container>
         {/* Nodes */}
         {nodes.map((node, index) => {
           return (
-            <Grid item lg={6} sm={12} xl={4} xs={12} key={index}>
+            <Grid
+              item
+              lg={6}
+              sm={12}
+              xl={4}
+              xs={12}
+              key={index}
+              paddingX={1}
+              paddingY={1}
+            >
               <Paper
                 sx={{
                   display: 'flex',
diff --git a/javascript/grid-ui/src/screens/Sessions/Sessions.tsx b/javascript/grid-ui/src/screens/Sessions/Sessions.tsx
@@ -39,15 +39,15 @@ function Sessions () {
                     + 'queued Sessions from the Grid.'
     const errorMessage = error?.networkError?.message
     return (
-      <Grid container spacing={3}>
+      <Grid container>
         <Error message={message} errorMessage={errorMessage}/>
       </Grid>
     )
   }
 
   if (loading) {
     return (
-      <Grid container spacing={3}>
+      <Grid container>
         <Loading/>
       </Grid>
     )
@@ -57,14 +57,14 @@ function Sessions () {
       && data.sessionsInfo.sessions.length === 0) {
     const shortMessage = 'No running or queued sessions at the moment.'
     return (
-      <Grid container spacing={3}>
+      <Grid container>
         <NoData message={shortMessage}/>
       </Grid>
     )
   }
 
   return (
-    <Grid container spacing={3}>
+    <Grid container>
       <RunningSessions
         sessions={data.sessionsInfo.sessions}
         origin={window.location.origin}
