Align page date with app name

pkirilin · Apr 2, 2024 · 5019c63 · 5019c63
1 parent 3bd6a0e
commit 5019c63
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/frontend/src/features/pages/ui/PageDetailHeader.tsx b/src/frontend/src/features/pages/ui/PageDetailHeader.tsx
@@ -6,6 +6,7 @@ import {
   Typography,
   type TypographyProps,
   styled,
+  Box,
 } from '@mui/material';
 import { useMemo, type FC } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
@@ -29,16 +30,16 @@ export const PageDetailHeader: FC<Props> = ({ page }) => {
   const totalCalories = useMemo(() => notes.reduce((sum, note) => sum + note.calories, 0), [notes]);
 
   return (
-    <>
+    <Box display="flex" alignItems="center" gap={3} width="100%">
       <Tooltip title="Back to pages list">
-        <IconButton edge="start" component={RouterLink} to="/pages" sx={{ marginRight: 1 }}>
+        <IconButton edge="start" component={RouterLink} to="/pages">
           <ArrowBackIcon />
         </IconButton>
       </Tooltip>
       <Stack direction="row" spacing={2} justifyContent="space-between" width="100%">
         <TextStyled component="h1">{formatDate(new Date(page.date))}</TextStyled>
         <TextStyled component="span">{totalCalories} kcal</TextStyled>
       </Stack>
-    </>
+    </Box>
   );
 };