From ed521237336c9d3813397896eebc1e266907cfa0 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Mon, 29 Jul 2024 08:26:48 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(header)=20better=20feedback=20inte?=
 =?UTF-8?q?gration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- small screens are now usable (not that great but better than before)
- spacing is more consistent between left and right
---
 src/frontend/src/layout/Header.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index c456c4a7..36fc41c7 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -25,9 +25,21 @@ export const Header = () => {
         flexShrink: 0,
       })}
     >
-      <Stack direction="row" justify="space-between" align="center">
+      <div
+        className={css({
+          display: 'flex',
+          flexDirection: 'column',
+          rowGap: 1,
+          md: {
+            rowGap: 0,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          },
+        })}
+      >
         <header>
-          <Stack gap={1} direction="row" align="center">
+          <Stack gap={2.25} direction="row" align="center">
             <Text bold variant="h1" margin={false}>
               <Link
                 onClick={(event) => {
@@ -74,7 +86,7 @@ export const Header = () => {
             <SettingsButton />
           </Stack>
         </nav>
-      </Stack>
+      </div>
     </div>
   )
 }