🎨(app-desk) box default direction column

Change the default direction of the Box component to column
to have a behavior closer to a normal div.

src/frontend/apps/desk/src/app/InnerLayout.tsx

@@ -7,12 +7,11 @@ export default function InnerLayout({
   children: React.ReactNode;
 }) {
   return (
-    <Box as="main" $direction="column" $height="100vh" $css="overflow:hidden;">
+    <Box as="main" $height="100vh" $css="overflow:hidden;">
       <Header />
-      <Box $css="flex: 1;">
+      <Box $css="flex: 1;" $direction="row">
         <Menu />
         <Box
-          $direction="column"
           $height={`calc(100vh - ${HEADER_HEIGHT})`}
           $width="100%"
           $css="overflow: auto;"

src/frontend/apps/desk/src/app/page.tsx

@@ -9,7 +9,7 @@ export default function Home() {
   const { t } = useTranslation();
 
   return (
-    <Box $direction="column" className="p-b">
+    <Box className="p-b">
       <h1>{t('Hello Desk !')}</h1>
       <Teams />
     </Box>

src/frontend/apps/desk/src/components/Box.tsx

@@ -21,6 +21,7 @@ export interface BoxProps {
 
 export const Box = styled('div')<BoxProps>`
   display: flex;
+  flex-direction: column;
   ${({ $align }) => $align && `align-items: ${$align};`}
   ${({ $background }) => $background && `background: ${$background};`}
   ${({ $color }) => $color && `color: ${$color};`}

src/frontend/apps/desk/src/features/header/Header.tsx

@@ -42,16 +42,21 @@ export const Header = () => {
   return (
     <StyledHeader>
       <RedStripe />
-      <Box className="ml-bx mr-bx" $align="center" $justify="space-between">
+      <Box
-        <Box $direction="column">
+        className="ml-bx mr-bx"
+        $align="center"
+        $justify="space-between"
+        $direction="row"
+      >
+        <Box>
           <Image priority src={IconMarianne} alt={t('Marianne Logo')} />
-          <Box $align="center" $gap="6rem">
+          <Box $align="center" $gap="6rem" $direction="row">
             <Image
               priority
               src={IconGouv}
               alt={t('Freedom Equality Fraternity Logo')}
             />
-            <Box $align="center" $gap="1rem">
+            <Box $align="center" $gap="1rem" $direction="row">
               <Image priority src={IconDesk} alt={t('Desk Logo')} />
               <Text className="m-0" as="h2">
                 {t('Desk')}
@@ -68,18 +73,20 @@ export const Header = () => {
           `}
           $gap="5rem"
           $justify="flex-end"
+          $direction="row"
         >
-          <Box $align="center">
+          <Box $align="center" $direction="row">
             <Button
               aria-label={t('Access to FAQ')}
               icon={<Image priority src={IconFAQ} alt={t('FAQ Icon')} />}
               className="m-s c__button-no-bg p-0"
+              color="tertiary"
             >
               {t('FAQ')}
             </Button>
             <LanguagePicker />
           </Box>
-          <Box>
+          <Box $direction="row">
             <Box $direction="row" $align="center" $gap="1rem">
               <Text $weight="bold">John Doe</Text>
               <Image

src/frontend/apps/desk/src/features/menu/Menu.tsx

@@ -23,7 +23,6 @@ export const Menu = () => {
       $height="100%"
       $width="3.75rem"
       $justify="space-between"
-      $direction="column"
     >
       <Box className="pt-b" $direction="column" $gap="0.8rem">
         <MenuItem Icon={IconSearch} label={t('Search')} href="/" />