feat: max line length on large layouts

Signed-off-by: Maud Royer <[email protected]>
betagouv · Aug 28, 2024 · 3c10886 · 3c10886
1 parent 31fa972
commit 3c10886
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 68 deletions.
diff --git a/src/app/medicament/[CIS]/page.tsx b/src/app/medicament/[CIS]/page.tsx
@@ -319,40 +319,44 @@ export default async function Page({
         </ul>
       </section>
       {leaflet ? (
-        <article>
-          <div className={fr.cx("fr-mb-4w")}>
-            <h1 className={fr.cx("fr-h3", "fr-mb-1w")}>Notice</h1>
-            <Badge severity={"info"}>{leaflet.maj}</Badge>
-          </div>
-
-          <Accordion label={"Généralités"} titleAs={"h2"}>
-            <DsfrLeafletSection data={leaflet.generalities} />
-          </Accordion>
-
-          <Accordion label={"A quoi sert-il"}>
-            <DsfrLeafletSection data={leaflet.usage} />
-          </Accordion>
-
-          <Accordion label={"Précautions"}>
-            <DsfrLeafletSection data={leaflet.warnings} />
-          </Accordion>
-
-          <Accordion label={"Comment le prendre ?"}>
-            <DsfrLeafletSection data={leaflet.howTo} />
-          </Accordion>
-
-          <Accordion label={"Effets indésirables"}>
-            <DsfrLeafletSection data={leaflet.sideEffects} />
-          </Accordion>
-
-          <Accordion label={"Conservation"}>
-            <DsfrLeafletSection data={leaflet.storage} />
-          </Accordion>
-
-          <Accordion label={"Composition"}>
-            <DsfrLeafletSection data={leaflet.composition} />
-          </Accordion>
-        </article>
+        <div className={fr.cx("fr-grid-row")}>
+          <article
+            className={fr.cx("fr-col-12", "fr-col-lg-9", "fr-col-md-10")}
+          >
+            <div className={fr.cx("fr-mb-4w")}>
+              <h1 className={fr.cx("fr-h3", "fr-mb-1w")}>Notice</h1>
+              <Badge severity={"info"}>{leaflet.maj}</Badge>
+            </div>
+
+            <Accordion label={"Généralités"} titleAs={"h2"}>
+              <DsfrLeafletSection data={leaflet.generalities} />
+            </Accordion>
+
+            <Accordion label={"A quoi sert-il"}>
+              <DsfrLeafletSection data={leaflet.usage} />
+            </Accordion>
+
+            <Accordion label={"Précautions"}>
+              <DsfrLeafletSection data={leaflet.warnings} />
+            </Accordion>
+
+            <Accordion label={"Comment le prendre ?"}>
+              <DsfrLeafletSection data={leaflet.howTo} />
+            </Accordion>
+
+            <Accordion label={"Effets indésirables"}>
+              <DsfrLeafletSection data={leaflet.sideEffects} />
+            </Accordion>
+
+            <Accordion label={"Conservation"}>
+              <DsfrLeafletSection data={leaflet.storage} />
+            </Accordion>
+
+            <Accordion label={"Composition"}>
+              <DsfrLeafletSection data={leaflet.composition} />
+            </Accordion>
+          </article>
+        </div>
       ) : null}
     </>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,26 +4,30 @@ import Button from "@codegouvfr/react-dsfr/Button";
 
 export default async function Page() {
   return (
-    <>
-      <form action="/rechercher">
-        <h1 className={fr.cx("fr-h5")}>Quel médicament cherchez-vous&nbsp;?</h1>
-        <Input
-          label={"Quel médicament cherchez-vous&nbsp;?"}
-          hideLabel={true}
-          addon={
-            <Button
-              iconId={"fr-icon-search-line"}
-              title="Recherche"
-              type="submit"
-            />
-          }
-          nativeInputProps={{
-            placeholder: "Rechercher",
-            name: "s",
-            type: "search",
-          }}
-        />
-      </form>
-    </>
+    <div className={fr.cx("fr-grid-row")}>
+      <div className={fr.cx("fr-col-12", "fr-col-lg-9", "fr-col-md-10")}>
+        <form action="/rechercher">
+          <h1 className={fr.cx("fr-h5")}>
+            Quel médicament cherchez-vous&nbsp;?
+          </h1>
+          <Input
+            label={"Quel médicament cherchez-vous&nbsp;?"}
+            hideLabel={true}
+            addon={
+              <Button
+                iconId={"fr-icon-search-line"}
+                title="Recherche"
+                type="submit"
+              />
+            }
+            nativeInputProps={{
+              placeholder: "Rechercher",
+              name: "s",
+              type: "search",
+            }}
+          />
+        </form>
+      </div>
+    </div>
   );
 }
diff --git a/src/app/rechercher/page.tsx b/src/app/rechercher/page.tsx
@@ -60,19 +60,26 @@ export default async function Page({
 
   return (
     <>
-      <form action="/rechercher" className={fr.cx("fr-my-4w")}>
-        <Input
-          label={"Quel médicament cherchez-vous&nbsp;?"}
-          hideLabel={true}
-          addon={<Button iconId={"fr-icon-search-line"} title="Recherche" />}
-          nativeInputProps={{
-            name: "s",
-            placeholder: "Rechercher",
-            ...(search ? { defaultValue: search } : {}),
-            type: "search",
-          }}
-        />
-      </form>
+      <div className={fr.cx("fr-grid-row")}>
+        <div className={fr.cx("fr-col-12", "fr-col-lg-9", "fr-col-md-10")}>
+          {" "}
+          <form action="/rechercher" className={fr.cx("fr-my-4w")}>
+            <Input
+              label={"Quel médicament cherchez-vous&nbsp;?"}
+              hideLabel={true}
+              addon={
+                <Button iconId={"fr-icon-search-line"} title="Recherche" />
+              }
+              nativeInputProps={{
+                name: "s",
+                placeholder: "Rechercher",
+                ...(search ? { defaultValue: search } : {}),
+                type: "search",
+              }}
+            />
+          </form>
+        </div>
+      </div>
       {results && (
         <>
           <p>{results.specialites.length} RÉSULTATS</p>