andrei/maternal-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Fix homepage grid layout spacing and alignment

Browse Source 
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.
This commit is contained in:
Andrei
2025-10-02 16:07:27 +00:00
parent d3bac14f71
commit 1044f228f2
1 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
maternal-web/app/page.tsx
View File

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