Update ToKolonner styles and widths

Author: ramnav990

src/components/oppsummering/oppsummeringAvVilkårOgGrunnlag/OppsummeringAvFormue.tsx

@@ -39,7 +39,11 @@ const OppsummeringAvFormueVilkår = (props: {
                         const bekreftetFormue = søkersFormue + epsFormue;
                         return (
                             <li key={f.id} className={styles.grunnlagsListe}>
-                                <OppsummeringPar label={formatMessage('periode')} verdi={formatPeriode(f.periode)} />
+                                <OppsummeringPar
+                                    className={styles.periode}
+                                    label={formatMessage('periode')}
+                                    verdi={formatPeriode(f.periode)}
+                                />
                                 <OppsummeringAvFormuegrunnlag g={f.grunnlag} />
                                 <Formuestatus
                                     bekreftetFormue={bekreftetFormue}
@@ -60,7 +64,7 @@ const OppsummeringAvFormuegrunnlag = (props: { g: Formuegrunnlag }) => {
     const { formatMessage } = useI18n({ messages });
     return (
         <div className={styles.formueGrunnlagContainer}>
-            <FormueTrippel label="" søkersVerdi="Søker" epsverdi={props.g.epsFormue ? 'Ektefelle/Samboer' : null} />
+            <FormueTrippel label="" søkersVerdi="Søker" epsverdi={props.g.epsFormue ? 'EPS' : null} />
             <FormueTrippel
                 label={formatMessage('formue.verdi.bolig')}
                 søkersVerdi={props.g.søkersFormue.verdiIkkePrimærbolig}
@@ -105,6 +109,7 @@ const OppsummeringAvFormuegrunnlag = (props: { g: Formuegrunnlag }) => {
     );
 };
 
+/*
 export const FormueTrippel = (props: {
     label: string;
     søkersVerdi: number | string | JSX.Element;
@@ -126,5 +131,20 @@ export const FormueTrippel = (props: {
         </div>
     );
 };
+*/
+
+export const FormueTrippel = (props: {
+    label: string;
+    søkersVerdi: number | string | JSX.Element;
+    epsverdi?: Nullable<number | string | JSX.Element>;
+}) => {
+    return (
+        <div className={styles.formueTripple}>
+            <BodyShort>{props.label}</BodyShort>
+            <Label>{props.søkersVerdi}</Label>
+            <Label>{props.epsverdi}</Label>
+        </div>
+    );
+};
 
 export default OppsummeringAvFormueVilkår;

src/components/oppsummering/oppsummeringAvVilkårOgGrunnlag/oppsummeringAvVilkårOgGrunnlag.module.less

@@ -8,25 +8,23 @@
     > :not(:last-child) {
         margin-bottom: @spacing-xxs;
     }
+
     margin-bottom: @spacing;
 }
 
+.periode {
+    display: grid;
+    grid-template-columns: 10rem 10rem;
+}
+
 .formueGrunnlagContainer {
     margin-bottom: @spacing;
 }
 
 .formueTripple {
-    display: flex;
-    justify-content: space-between;
-
-    .verdiPairMedEPS {
-        display: grid;
-        grid-template-columns: 5rem 8rem;
-
-        .verdi {
-            text-align: right;
-        }
-    }
+    display: grid;
+    grid-template-columns: 10rem 4rem 4rem;
+    gap: @spacing-xs;
 }
 
 .utenlandsinntektContainer {

src/components/oppsummering/oppsummeringpar/OppsummeringPar.tsx

@@ -26,7 +26,7 @@ export const OppsummeringPar = ({ label, verdi, className = '', textSomSmall, re
         );
     }
     return (
-        <div className={classNames(styles.oppsummeringspar, className)}>
+        <div className={className ?? styles.oppsummeringspar}>
             <BodyShort size={textSomSmall ? 'small' : undefined}>{label}</BodyShort>
             <Label className={styles.verdi} size={textSomSmall ? 'small' : undefined}>
                 {verdi ?? ''}

src/components/toKolonner/ToKolonner.tsx

@@ -1,4 +1,5 @@
 import { Heading } from '@navikt/ds-react';
+import classNames from 'classnames';
 
 import styles from './toKolonner.module.less';
 
@@ -8,9 +9,17 @@ const ToKolonner = (props: {
         left: JSX.Element;
         right: JSX.Element | null;
     };
+    width?: '50/50' | '60/40' | '40/60';
 }) => (
     <div className={styles.contentContainer}>
-        <div className={styles.left}>
+        <div
+            className={classNames({
+                [styles.left]: true,
+                [styles.width60]: props.width === '60/40',
+                [styles.width50]: props.width === '50/50' || !props.width,
+                [styles.width40]: props.width === '40/60',
+            })}
+        >
             {typeof props.tittel === 'string' ? (
                 <Heading level="1" size="large" spacing>
                     {props.tittel}
@@ -20,7 +29,14 @@ const ToKolonner = (props: {
             )}
             {props.children.left}
         </div>
-        <div className={styles.rightContainer}>
+        <div
+            className={classNames({
+                [styles.rightContainer]: true,
+                [styles.width60]: props.width === '40/60',
+                [styles.width50]: props.width === '50/50' || !props.width,
+                [styles.width40]: props.width === '60/40',
+            })}
+        >
             <div className={styles.right}>{props.children.right}</div>
         </div>
     </div>

src/components/toKolonner/toKolonner.module.less

@@ -8,21 +8,31 @@
 }
 
 .left {
-    width: 50%;
     padding: @spacing-s;
     border-right: 1px solid @navBorder;
 
     textarea {
-        max-width: 25.5rem;
+        max-width: 30rem;
     }
 }
 
 .rightContainer {
-    width: 50%;
     padding: @spacing-s;
 }
 
 .right {
     position: sticky;
     top: 20px;
 }
+
+.width60 {
+    width: 60%;
+}
+
+.width50 {
+    width: 50%;
+}
+
+.width40 {
+    width: 40%;
+}

src/pages/saksbehandling/revurdering/OppsummeringPage/forhåndsvarsel/ForhåndsvarselForm.tsx

@@ -82,7 +82,7 @@ const ForhåndsvarselForm = (props: {
     };
 
     return (
-        <ToKolonner tittel={formatMessage('forhåndsvarsel.tittel')}>
+        <ToKolonner tittel={formatMessage('forhåndsvarsel.tittel')} width="40/60">
             {{
                 left: (
                     <FormWrapper

src/pages/saksbehandling/revurdering/OppsummeringPage/sendTilAttestering/SendTilAttestering.tsx

@@ -150,7 +150,7 @@ const SendTilAttestering = (props: {
     }, [watch.valg]);
 
     return (
-        <ToKolonner tittel={'Vedtaksbrev'}>
+        <ToKolonner tittel={'Vedtaksbrev'} width="40/60">
             {{
                 left: (
                     <FormWrapper

src/pages/saksbehandling/revurdering/OppsummeringPage/tilbakekreving/TilbakekrevingForm.tsx

@@ -73,7 +73,7 @@ const TilbakekrevingForm = (props: {
     });
 
     return (
-        <ToKolonner tittel={formatMessage('tilbakekreving.tittel')}>
+        <ToKolonner tittel={formatMessage('tilbakekreving.tittel')} width="40/60">
             {{
                 left: (
                     <FormWrapper