💄(frontend) enhance header responsiveness

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

@@ -32,14 +32,10 @@ export const Header = () => {
         <div
           className={css({
             display: 'flex',
-            flexDirection: 'column',
+            rowGap: 0,
-            rowGap: 1,
+            flexDirection: 'row',
-            md: {
+            justifyContent: 'space-between',
-              rowGap: 0,
+            alignItems: 'center',
-              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') }]}