From 97cec8901c80425b2504312316830ed4617fea1d Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Tue, 26 Mar 2024 00:17:24 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(frontend)=20enhance=20team=20info?=
 =?UTF-8?q?=20style=20to=20avoid=20layout=20shift?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On small screens, padding and alignment were causing texts to render wrapped.
It might be a personal choice, but I decided to give more space to the text,
thus avoiding text to wrap and ending up in increasing team info's height.

This issue arises when closing / opening the panel menu.
---
 .../apps/desk/src/features/teams/components/TeamInfo.tsx     | 5 +----
 1 file changed, 1 insertion(+), 4 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 5dcb6a2..823874a 100644
--- a/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx
+++ b/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx
@@ -67,15 +67,12 @@ export const TeamInfo = ({ team, currentRole }: TeamInfoProps) => {
         </Box>
         <Box
           className="p-s"
-          $gap="2rem"
+          $gap="3rem"
           $direction="row"
           $justify="start"
           $css={`
             border-top: 1px solid ${colorsTokens()['card-border']};
             padding-left: 1.5rem;
-            @media (min-width: 768px) {
-              padding-left: 6rem;
-            }
           `}
         >
           <Text $size="s" as="p">