fix: layout issue in section

annuaire-entreprises-data-gouv-fr · Jul 24, 2024 · bee87c9 · bee87c9
1 parent 8762cff
commit bee87c9
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 35 deletions.
diff --git a/components/section/index.tsx b/components/section/index.tsx
@@ -57,9 +57,31 @@ export const Section: React.FC<PropsWithChildren<ISectionProps>> = ({
             </Icon>
           </div>
         )}
-        <h2 style={{ color: titleColor, backgroundColor: borderColor }}>
-          {title}
-        </h2>
+        <div className={style['section-header']}>
+          <h2 style={{ color: titleColor, backgroundColor: borderColor }}>
+            {title}
+          </h2>
+          <div className={style['section-logo-wrapper']}>
+            {dataSources.map(
+              ({ slug, long, logoType }) =>
+                logoType && (
+                  <a
+                    key={long}
+                    href={faqLink}
+                    title={long}
+                    className="no-style-link"
+                  >
+                    {logoType === 'portrait' ? (
+                      <Logo title={long} slug={slug} width={70} height={40} />
+                    ) : (
+                      <Logo title={long} slug={slug} width={170} height={40} />
+                    )}
+                  </a>
+                )
+            )}
+          </div>
+        </div>
+
         {isOld && lastModified && (
           <Warning>
             Ces données n’ont pas été mises à jour depuis plus de deux mois.
@@ -77,25 +99,6 @@ export const Section: React.FC<PropsWithChildren<ISectionProps>> = ({
             />
           </div>
         )}
-        <div className={style['section-logo-wrapper']}>
-          {dataSources.map(
-            ({ slug, long, logoType }) =>
-              logoType && (
-                <a
-                  key={long}
-                  href={faqLink}
-                  title={long}
-                  className="no-style-link"
-                >
-                  {logoType === 'portrait' ? (
-                    <Logo title={long} slug={slug} width={70} height={40} />
-                  ) : (
-                    <Logo title={long} slug={slug} width={170} height={40} />
-                  )}
-                </a>
-              )
-          )}
-        </div>
       </div>
     </SectionErrorBoundary>
   );

diff --git a/components/section/style.module.css b/components/section/style.module.css
@@ -5,19 +5,30 @@
   position: relative;
   margin: 20px 0 40px;
   padding: 1rem;
+}
 
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 25px;
 }
 
-.section-container>h2 {
+.section-header > h2 {
   margin-top: 0;
-  margin-bottom: 25px;
   display: inline-block;
   font-size: 1.1rem;
   line-height: 1.8rem;
 
   padding: 0 7px;
   border-radius: 2px;
-  max-width: calc(100% - 400px);
+}
+
+.section-logo-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+  margin-top: 5px;
 }
 
 .administration-page-link {
@@ -29,20 +40,12 @@
   margin-top: 25px;
 }
 
-.section-logo-wrapper {
-  position: absolute;
-  top: 25px;
-  right: 16px;
-  display: flex;
-  justify-content: flex-end;
-}
-
 @media only screen and (min-width: 1px) and (max-width: 768px) {
   .section-logo-wrapper {
     display: none;
   }
 
-  .section-container>h2 {
+  .section-container > h2 {
     max-width: 100%;
   }
 }
@@ -66,4 +69,4 @@
     text-align: center;
     border-radius: 20px;
   }
-}
+}