Merge pull request #3352 from navikt/layout-fixes

Layout fixes
navikt · Feb 23, 2024 · 802a45a · 802a45a
2 parents d2c5005 + 248733e
commit 802a45a
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 73 deletions.
diff --git a/frontend/mr-admin-flate/src/components/avtaler/AvtaleSkjemaDetaljer.tsx b/frontend/mr-admin-flate/src/components/avtaler/AvtaleSkjemaDetaljer.tsx
@@ -1,4 +1,4 @@
-import { Button, Textarea, TextField } from "@navikt/ds-react";
+import { Button, HGrid, Textarea, TextField } from "@navikt/ds-react";
 import {
   Avtale,
   Avtaletype,
@@ -103,57 +103,61 @@ export function AvtaleSkjemaDetaljer({ tiltakstyper, ansatt, enheter, avtale }:
     <div className={skjemastyles.container}>
       <div className={skjemastyles.input_container}>
         <div className={skjemastyles.column}>
-          <FormGroup cols={avtale?.avtalenummer ? 2 : 1}>
-            <TextField
-              size="small"
-              readOnly={arenaOpphavOgIngenEierskap}
-              error={errors.navn?.message}
-              label="Avtalenavn"
-              autoFocus
-              {...register("navn")}
-            />
-            {avtale?.avtalenummer ? (
-              <TextField size="small" readOnly label="Avtalenummer" value={avtale.avtalenummer} />
-            ) : null}
+          <FormGroup>
+            <HGrid gap="4" columns={avtale?.avtalenummer ? 2 : 1}>
+              <TextField
+                size="small"
+                readOnly={arenaOpphavOgIngenEierskap}
+                error={errors.navn?.message}
+                label="Avtalenavn"
+                autoFocus
+                {...register("navn")}
+              />
+              {avtale?.avtalenummer ? (
+                <TextField size="small" readOnly label="Avtalenummer" value={avtale.avtalenummer} />
+              ) : null}
+            </HGrid>
           </FormGroup>
           <Separator />
-          <FormGroup cols={2}>
-            <ControlledSokeSelect
-              size="small"
-              readOnly={arenaOpphavOgIngenEierskap}
-              placeholder="Velg en"
-              label={"Tiltakstype"}
-              {...register("tiltakstype")}
-              options={tiltakstyper.map((tiltakstype) => ({
-                value: {
-                  arenaKode: tiltakstype.arenaKode,
-                  navn: tiltakstype.navn,
-                  id: tiltakstype.id,
-                },
-                label: tiltakstype.navn,
-              }))}
-            />
-            <ControlledSokeSelect
-              size="small"
-              readOnly={arenaOpphavOgIngenEierskap}
-              placeholder="Velg en"
-              label={"Avtaletype"}
-              {...register("avtaletype")}
-              options={[
-                {
-                  value: Avtaletype.FORHAANDSGODKJENT,
-                  label: "Forhåndsgodkjent avtale",
-                },
-                {
-                  value: Avtaletype.RAMMEAVTALE,
-                  label: "Rammeavtale",
-                },
-                {
-                  value: Avtaletype.AVTALE,
-                  label: "Avtale",
-                },
-              ]}
-            />
+          <FormGroup>
+            <HGrid gap="4" columns={2}>
+              <ControlledSokeSelect
+                size="small"
+                readOnly={arenaOpphavOgIngenEierskap}
+                placeholder="Velg en"
+                label={"Tiltakstype"}
+                {...register("tiltakstype")}
+                options={tiltakstyper.map((tiltakstype) => ({
+                  value: {
+                    arenaKode: tiltakstype.arenaKode,
+                    navn: tiltakstype.navn,
+                    id: tiltakstype.id,
+                  },
+                  label: tiltakstype.navn,
+                }))}
+              />
+              <ControlledSokeSelect
+                size="small"
+                readOnly={arenaOpphavOgIngenEierskap}
+                placeholder="Velg en"
+                label={"Avtaletype"}
+                {...register("avtaletype")}
+                options={[
+                  {
+                    value: Avtaletype.FORHAANDSGODKJENT,
+                    label: "Forhåndsgodkjent avtale",
+                  },
+                  {
+                    value: Avtaletype.RAMMEAVTALE,
+                    label: "Rammeavtale",
+                  },
+                  {
+                    value: Avtaletype.AVTALE,
+                    label: "Avtale",
+                  },
+                ]}
+              />
+            </HGrid>
           </FormGroup>
           <Separator />
           <FormGroup>

diff --git a/frontend/mr-admin-flate/src/components/skjema/FormGroup.tsx b/frontend/mr-admin-flate/src/components/skjema/FormGroup.tsx
@@ -2,15 +2,8 @@ import { ReactNode } from "react";
 import styles from "../skjema/Skjema.module.scss";
 import classNames from "classnames";
 
-export const FormGroup = ({ children, cols = 1 }: { children: ReactNode; cols?: number }) => (
+export const FormGroup = ({ children }: { children: ReactNode }) => (
   <div className={styles.form_group}>
-    <div
-      className={classNames(styles.grid, {
-        [styles.grid_1]: cols === 1,
-        [styles.grid_2]: cols === 2,
-      })}
-    >
-      {children}
-    </div>
+    <div className={classNames(styles.grid)}>{children}</div>
   </div>
 );
diff --git a/frontend/mr-admin-flate/src/components/skjema/FraTilDatoVelger.tsx b/frontend/mr-admin-flate/src/components/skjema/FraTilDatoVelger.tsx
@@ -1,6 +1,6 @@
-import styles from "./FraTilDatoVelger.module.scss";
 import { ControlledDateInput, DateInputProps } from "./ControlledDateInput";
 import { ReactNode } from "react";
+import { HGrid } from "@navikt/ds-react";
 
 export interface FraTilDatoVelgerProps {
   fra: DateInputProps;
@@ -9,12 +9,11 @@ export interface FraTilDatoVelgerProps {
   children?: ReactNode;
 }
 
-export function FraTilDatoVelger({ fra, til, size, children }: FraTilDatoVelgerProps) {
+export function FraTilDatoVelger({ fra, til, size }: FraTilDatoVelgerProps) {
   return (
-    <div className={styles.dato_container}>
+    <HGrid columns={2}>
       <ControlledDateInput size={size} {...fra} />
       <ControlledDateInput size={size} {...til} />
-      {children}
-    </div>
+    </HGrid>
   );
 }
diff --git a/frontend/mr-admin-flate/src/components/skjema/Skjema.module.scss b/frontend/mr-admin-flate/src/components/skjema/Skjema.module.scss
@@ -121,16 +121,10 @@
 
   .grid {
     display: grid;
+    grid-template-columns: repeat(1, 1fr);
+
     gap: 1rem;
     align-items: start;
-
-    &_1 {
-      grid-template-columns: repeat(1, 1fr);
-    }
-
-    &_2 {
-      grid-template-columns: repeat(2, 1fr);
-    }
   }
 }
 

diff --git a/...-admin-flate/src/components/tiltaksgjennomforinger/TiltaksgjennomforingSkjemaDetaljer.tsx b/...-admin-flate/src/components/tiltaksgjennomforinger/TiltaksgjennomforingSkjemaDetaljer.tsx
@@ -251,7 +251,7 @@ export const TiltaksgjennomforingSkjemaDetaljer = ({ tiltaksgjennomforing, avtal
                 Registrer estimert ventetid
               </Switch>
               {watch("visEstimertVentetid") ? (
-                <HStack justify="start" gap="10" columns={4}>
+                <HStack align="start" justify="start" gap="10" columns={4}>
                   <TextField
                     size="small"
                     type="number"