From 59a557541712bc72d61861b4e6b62254ff554a4c Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Thu, 27 Jul 2023 09:58:08 +0200
Subject: [PATCH] Improve spaces between section details (ui)

---
 .../src/components/pages/details/Details.tsx  | 36 ++++++++-----------
 .../DetailsSection/DetailsSection.tsx         | 18 ++--------
 2 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx
index a73b7a333..047497a81 100644
--- a/frontend/src/components/pages/details/Details.tsx
+++ b/frontend/src/components/pages/details/Details.tsx
@@ -353,27 +353,21 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ slug, parentId, langu
                                 titleId="details.recommandations"
                                 className={marginDetailsChild}
                               >
-                                {details.advice !== null && details.advice.length > 0 && (
-                                  <DetailsAdvice
-                                    text={details.advice}
-                                    className="mb-4 desktop:mb-6"
-                                  />
-                                )}
-                                {details.gear !== null && (
-                                  <DetailsGear text={details.gear} className="mt-4 desktop:mb-6" />
-                                )}
-                                {details.labels.map((label, i) => (
-                                  <DetailsLabel
-                                    key={i}
-                                    id={label.id}
-                                    name={label.name}
-                                    advice={label.advice}
-                                    pictogramUri={label.pictogramUri}
-                                    className={
-                                      i < details.labels.length - 1 ? 'mt-4 desktop:mt-6' : ''
-                                    }
-                                  />
-                                ))}
+                                <div className="flex flex-col gap-4 desktop:gap-6">
+                                  {details.advice !== null && details.advice.length > 0 && (
+                                    <DetailsAdvice text={details.advice} />
+                                  )}
+                                  {details.gear !== null && <DetailsGear text={details.gear} />}
+                                  {details.labels.map(label => (
+                                    <DetailsLabel
+                                      key={label.id}
+                                      id={label.id}
+                                      name={label.name}
+                                      advice={label.advice}
+                                      pictogramUri={label.pictogramUri}
+                                    />
+                                  ))}
+                                </div>
                               </DetailsSection>
                             </div>
                           )}
diff --git a/frontend/src/components/pages/details/components/DetailsSection/DetailsSection.tsx b/frontend/src/components/pages/details/components/DetailsSection/DetailsSection.tsx
index 9cbe1b65a..0e271752b 100644
--- a/frontend/src/components/pages/details/components/DetailsSection/DetailsSection.tsx
+++ b/frontend/src/components/pages/details/components/DetailsSection/DetailsSection.tsx
@@ -1,8 +1,6 @@
 import { Separator } from 'components/Separator';
 import { FormattedMessage } from 'react-intl';
 import { cn } from 'services/utils/cn';
-import styled from 'styled-components';
-import { scrollBar } from 'stylesheet';
 
 export interface DetailsSectionProps {
   titleId?: string;
@@ -19,12 +17,13 @@ export const DetailsSection: React.FC<DetailsSectionProps> = ({
 }) => {
   return (
     <div className={cn('scroll-mt-20 desktop:scroll-mt-30', className)} id={htmlId}>
-      <ScrollContainer
+      <div
         id="details_section"
         className={`flex flex-col
           pt-6 desktop:pt-12
           pb-3 desktop:pb-6
           mb-3 desktop:mb-6
+          max-w-full overflow-x-auto
           `}
       >
         {titleId !== undefined && (
@@ -39,19 +38,8 @@ export const DetailsSection: React.FC<DetailsSectionProps> = ({
         >
           {children}
         </div>
-      </ScrollContainer>
+      </div>
       <Separator />
     </div>
   );
 };
-
-const ScrollContainer = styled.div`
-  &::-webkit-scrollbar {
-    ${scrollBar.root}
-  }
-  &::-webkit-scrollbar-thumb {
-    ${scrollBar.thumb}
-  }
-  max-width: 100%;
-  overflow-x: auto;
-`;