bruk grid layout i EndreKontaktInformasjon

Author: henriktheboss

src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreKontaktInfo/EndreKontaktInformasjon.less

@@ -22,8 +22,18 @@
             width: calc(50% - 1rem);
 
             &:nth-child(odd) {
-                margin-right: 1rem;
+                margin-right: 2rem;
             }
         }
     }
+
+    &__grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        column-gap: 1rem;
+        row-gap: 1rem;
+        .telefonnummer-input-container {
+            width: 60%;
+        }
+    }
 }

src/AvtaleSide/steg/GodkjenningSteg/endringAvAvtaleInnhold/endreKontaktInfo/EndreKontaktInformasjon.tsx

@@ -3,17 +3,16 @@ import BekreftelseModal from '@/komponenter/modal/BekreftelseModal';
 import PakrevdInput from '@/komponenter/PakrevdInput/PakrevdInput';
 import TelefonnummerInput from '@/komponenter/TelefonnummerInput/TelefonnummerInput';
 import { oppdatereKontaktInformasjon } from '@/services/rest-service';
-import { EndreKontaktInfo, TiltaksType, VTAO } from '@/types/avtale';
+import { EndreKontaktInfo, TiltaksType } from '@/types/avtale';
 import BEMHelper from '@/utils/bem';
 import { Neutral } from '@navikt/ds-icons/cjs';
 import { Checkbox, Heading, Link } from '@navikt/ds-react';
 import React, { FunctionComponent, useContext, useState } from 'react';
 import './EndreKontaktInformasjon.less';
-import VerticalSpacer from '@/komponenter/layout/VerticalSpacer';
 
 const EndreKontaktInformasjon: FunctionComponent = () => {
     const cls = BEMHelper('endreKontaktInformasjon');
-    const { avtale, hentAvtale, settAvtaleInnholdVerdi } = useContext(AvtaleContext);
+    const { avtale, hentAvtale } = useContext(AvtaleContext);
     const vtao = avtale.gjeldendeInnhold.vtao;
 
     const {
@@ -112,7 +111,7 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                 <Heading level="3" size="small" className={cls.element('tittel')}>
                     Informasjon om deltaker
                 </Heading>
-                <div className={cls.element('rad')}>
+                <div className={cls.element('grid')}>
                     <PakrevdInput
                         label="Fornavn"
                         verdi={kontaktInfo.deltakerFornavn}
@@ -123,8 +122,6 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                         verdi={kontaktInfo.deltakerEtternavn}
                         settVerdi={(verdi) => settNyKontaktInformasjon('deltakerEtternavn', verdi)}
                     />
-                </div>
-                <div className={cls.element('rad')}>
                     <TelefonnummerInput
                         label="Mobilnummer "
                         verdi={kontaktInfo.deltakerTlf}
@@ -134,7 +131,7 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                 <Heading level="3" size="small" className={cls.element('tittel')}>
                     Informasjon om veileder
                 </Heading>
-                <div className={cls.element('rad')}>
+                <div className={cls.element('grid')}>
                     <PakrevdInput
                         label="Fornavn"
                         verdi={kontaktInfo.veilederFornavn}
@@ -145,8 +142,6 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                         verdi={kontaktInfo.veilederEtternavn}
                         settVerdi={(verdi) => settNyKontaktInformasjon('veilederEtternavn', verdi)}
                     />
-                </div>
-                <div className={cls.element('rad')}>
                     <TelefonnummerInput
                         label="Mobilnummer"
                         verdi={kontaktInfo.veilederTlf}
@@ -156,7 +151,7 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                 <Heading level="3" size="small" className={cls.element('tittel')}>
                     Kontaktperson for avtalen i bedriften
                 </Heading>
-                <div className={cls.element('rad')}>
+                <div className={cls.element('grid')}>
                     <PakrevdInput
                         label="Fornavn"
                         verdi={kontaktInfo.arbeidsgiverFornavn}
@@ -167,8 +162,6 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                         verdi={kontaktInfo.arbeidsgiverEtternavn}
                         settVerdi={(verdi) => settNyKontaktInformasjon('arbeidsgiverEtternavn', verdi)}
                     />
-                </div>
-                <div className={cls.element('rad')}>
                     <TelefonnummerInput
                         label="Mobilnummer"
                         verdi={kontaktInfo.arbeidsgiverTlf}
@@ -185,7 +178,7 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                         <Heading level="3" size="small" className={cls.element('tittel')}>
                             Informasjon om fadder
                         </Heading>
-                        <div className={cls.element('rad')}>
+                        <div className={cls.element('grid')}>
                             <PakrevdInput
                                 label="Fornavn"
                                 verdi={kontaktInfo.vtao?.fadderFornavn}
@@ -203,9 +196,6 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                                     })
                                 }
                             />
-                        </div>
-                        <VerticalSpacer rem={1} />
-                        <div className={cls.element('rad')}>
                             <TelefonnummerInput
                                 label="Mobilnummer"
                                 verdi={kontaktInfo.vtao?.fadderTlf}
@@ -219,7 +209,7 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                         <Heading size="small" className={cls.element('tittel')}>
                             Kontaktperson for refusjon i bedriften
                         </Heading>
-                        <div className={cls.element('rad')}>
+                        <div className={cls.element('grid')}>
                             <PakrevdInput
                                 label="Fornavn"
                                 verdi={kontaktInfo.refusjonKontaktperson.refusjonKontaktpersonFornavn}
@@ -240,8 +230,6 @@ const EndreKontaktInformasjon: FunctionComponent = () => {
                                     })
                                 }
                             />
-                        </div>
-                        <div className={cls.element('rad')}>
                             <TelefonnummerInput
                                 label="Mobilnummer"
                                 verdi={kontaktInfo.refusjonKontaktperson.refusjonKontaktpersonTlf}