fix padding

Author: pierrelefevre

fullstack/frontend/src/CreateMessage.tsx

@@ -17,7 +17,7 @@ export const CreateMessage = () => {
   };
 
   return (
-    <Stack direction="column" spacing={2}>
+    <Stack direction="column" spacing={2} alignItems="flex-start">
       <Typography variant="h4">Create a message</Typography>
       {error && (
         <Typography variant="body1" sx={{ color: "coral" }}>

fullstack/frontend/src/FrontPage.tsx

@@ -3,6 +3,7 @@ import {
   Box,
   Container,
   Link,
+  Stack,
   Toolbar,
   Typography,
 } from "@mui/material";
@@ -34,8 +35,10 @@ export const FrontPage = () => {
         </AppBar>
       </Box>
       <Container sx={{ p: 5 }}>
-        <CreateMessage />
-        <MessageList />
+        <Stack direction="column" spacing={2} alignItems="flex-start">
+          <CreateMessage />
+          <MessageList />
+        </Stack>
       </Container>
     </>
   );

fullstack/frontend/src/MessageList.tsx

@@ -13,7 +13,7 @@ export const MessageList = () => {
       setError(JSON.stringify(e, null, 2));
     }
   };
-  
+
   useEffect(() => {
     load();
   }, []);
@@ -24,7 +24,7 @@ export const MessageList = () => {
     </Typography>;
   }
   return (
-    <Stack direction="column" spacing={2}>
+    <Stack direction="column" spacing={2} alignItems="flex-start">
       <Button variant="contained" color="primary" onClick={load}>
         Load messages
       </Button>