Improve spaces between section details (ui)

GeotrekCE · Jul 27, 2023 · f3b8305 · f3b8305
1 parent 235c2fa
commit f3b8305
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 38 deletions.
diff --git 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
@@ -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,13 +17,14 @@ 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
+        className={cn(`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 && (
           <h2 className="text-Mobile-H1 desktop:text-H2 font-bold" id="details_sectionTitle">
@@ -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;
-`;