From b416c57bbe4366a1feb9c2e1c53c10c0c3dbb0fc Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Thu, 7 Mar 2024 00:10:19 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20fix=20layout=20overflo?=
 =?UTF-8?q?w=20in=20Team=20info?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Few minor layout issues were fixed.

First display label and dates inline, so they wrap nicely
when screen's size decreases. It also fixes the text overflow
when the screen's size is tiny.

Then, align screen with the Figma design, where items are
justified on the left of the Team info component.
---
 .../features/teams/components/TeamInfo.tsx    | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx b/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx
index 15d3db1..0b1cffd 100644
--- a/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx
+++ b/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx
@@ -58,21 +58,30 @@ export const TeamInfo = ({ team }: TeamInfoProps) => {
       </Box>
       <Box
         className="p-s"
-        $gap="1rem"
+        $gap="2rem"
         $direction="row"
-        $justify="space-evenly"
-        $css={`border-top: 1px solid ${colorsTokens()['card-border']};`}
+        $justify="start"
+        $css={`
+        border-top: 1px solid ${colorsTokens()['card-border']};
+        padding-left: 1.5rem;
+        @media (min-width: 768px) {
+          padding-left: 6rem;
+        }`}
       >
-        <Text $size="s">
+        <Text $size="s" as="p">
           {t('{{count}} member', { count: team.accesses.length })}
         </Text>
-        <Text $size="s" $direction="row">
+        <Text $size="s" $display="inline" as="p">
           {t('Created at')}&nbsp;
-          <Text $weight="bold">{created_at}</Text>
+          <Text $weight="bold" $display="inline">
+            {created_at}
+          </Text>
         </Text>
-        <Text $size="s" $direction="row">
+        <Text $size="s" $display="inline" as="p">
           {t('Last update at')}&nbsp;
-          <Text $weight="bold">{updated_at}</Text>
+          <Text $weight="bold" $display="inline">
+            {updated_at}
+          </Text>
         </Text>
       </Box>
     </Card>