From 1044f228f217763d7657eda44811d1b1df9cc95a Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Thu, 2 Oct 2025 16:07:27 +0000
Subject: [PATCH] fix(ui): Fix homepage grid layout spacing and alignment

Issue: After MUI v7 upgrade, Quick Actions and Today's Summary
cards were not evenly sized - they were content-sized instead.

Solution:
- Quick Actions: Added height: '100%' and flexbox layout to ensure
  all cards are the same height within each row
- Today's Summary stats: Added minHeight: '120px' with flexbox to
  ensure consistent card heights

Result: Both sections now have evenly spaced, consistent layouts
regardless of content length.
---
 maternal-web/app/page.tsx | 50 +++++++++++++++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/maternal-web/app/page.tsx b/maternal-web/app/page.tsx
index cc38151..32bb9c1 100644
--- a/maternal-web/app/page.tsx
+++ b/maternal-web/app/page.tsx
@@ -131,11 +131,17 @@ export default function HomePage() {
                   initial={{ opacity: 0, scale: 0.9 }}
                   animate={{ opacity: 1, scale: 1 }}
                   transition={{ duration: 0.3, delay: index * 0.1 }}
+                  style={{ height: '100%' }}
                 >
                   <Paper
                     onClick={() => router.push(action.path)}
                     sx={{
                       p: 3,
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                      justifyContent: 'center',
                       textAlign: 'center',
                       cursor: 'pointer',
                       bgcolor: action.color,
@@ -179,7 +185,16 @@ export default function HomePage() {
               ) : (
                 <Grid container spacing={3}>
                   <Grid item xs={6} sm={3}>
-                    <Box textAlign="center">
+                    <Box
+                      textAlign="center"
+                      sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        height: '100%',
+                        minHeight: '120px'
+                      }}
+                    >
                       <Restaurant sx={{ fontSize: 32, color: 'primary.main', mb: 1 }} />
                       <Typography variant="h5" fontWeight="600">
                         {dailySummary.feedingCount || 0}
@@ -190,7 +205,16 @@ export default function HomePage() {
                     </Box>
                   </Grid>
                   <Grid item xs={6} sm={3}>
-                    <Box textAlign="center">
+                    <Box
+                      textAlign="center"
+                      sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        height: '100%',
+                        minHeight: '120px'
+                      }}
+                    >
                       <Hotel sx={{ fontSize: 32, color: 'info.main', mb: 1 }} />
                       <Typography variant="h5" fontWeight="600">
                         {dailySummary.sleepTotalMinutes
@@ -203,7 +227,16 @@ export default function HomePage() {
                     </Box>
                   </Grid>
                   <Grid item xs={6} sm={3}>
-                    <Box textAlign="center">
+                    <Box
+                      textAlign="center"
+                      sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        height: '100%',
+                        minHeight: '120px'
+                      }}
+                    >
                       <BabyChangingStation sx={{ fontSize: 32, color: 'warning.main', mb: 1 }} />
                       <Typography variant="h5" fontWeight="600">
                         {dailySummary.diaperCount || 0}
@@ -214,7 +247,16 @@ export default function HomePage() {
                     </Box>
                   </Grid>
                   <Grid item xs={6} sm={3}>
-                    <Box textAlign="center">
+                    <Box
+                      textAlign="center"
+                      sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        height: '100%',
+                        minHeight: '120px'
+                      }}
+                    >
                       <MedicalServices sx={{ fontSize: 32, color: 'error.main', mb: 1 }} />
                       <Typography variant="h5" fontWeight="600">
                         {dailySummary.medicationCount || 0}