From e6bbf2d3c801f552ddc51f09a1ef73ed5438814b Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sun, 17 Nov 2024 16:00:33 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20enhance=20header=20res?=
 =?UTF-8?q?ponsiveness?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Quick fix, not optimal. Removed a useless breaking point IMO.
I won't spend too much time on the Header component, I'll
introduce new features needing a heavy layout update.
---
 src/frontend/src/layout/Header.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index d9fe551b..ff84fc53 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -32,14 +32,10 @@ export const Header = () => {
         <div
           className={css({
             display: 'flex',
-            flexDirection: 'column',
-            rowGap: 1,
-            md: {
-              rowGap: 0,
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-            },
+            rowGap: 0,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
           })}
         >
           <header>
@@ -74,7 +70,17 @@ export const Header = () => {
                     tooltip={t('loggedInUserTooltip')}
                     tooltipType="delayed"
                   >
-                    {user?.full_name || user?.email}
+                    <span
+                      className={css({
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        display: 'block',
+                        maxWidth: { base: '80px', xsm: '350px' },
+                      })}
+                    >
+                      {user?.full_name || user?.email}
+                    </span>
                   </Button>
                   <MenuList
                     items={[{ value: 'logout', label: t('logout') }]}