🩹(frontend) fix layout overflow in Team info

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.

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>