From 5bab546b58d2320edb91d1aebe573945255c6829 Mon Sep 17 00:00:00 2001
From: Emil Elton Nilsen <45180092+perkynades@users.noreply.github.com>
Date: Tue, 3 Dec 2024 09:31:07 +0100
Subject: [PATCH] O store gjenny opprydning (#6533)

* Gi bedre navn til aktivitetsplig routes

* Baibai main content

* Baibai grid container

* Baibai styled.tsx

* Fjern enda en styled
---
 ...AktivitetspliktOppgaveVurderingRoutes.tsx} | 14 ++--
 .../VurderAktivitetspliktOppgave.tsx          |  4 +-
 .../brev/AktivitetspliktBrev.tsx              | 78 +++++++++----------
 ...FerdigstillAktivitetspliktOppgaveModal.tsx |  2 +-
 .../brev/FerdigstillBrevModal.tsx             |  2 +-
 .../brev/LoependeUnntakInfo.tsx               |  2 +-
 .../aktivitetsplikt/brev/UtenBrevVisning.tsx  |  2 +-
 .../aktivitetsplikt/brev/ValgForInfobrev.tsx  |  2 +-
 .../brev/VurderingInfoBrevOgOppsummering.tsx  |  2 +-
 .../sidemeny/AktivitetspliktSidemeny.tsx      |  2 +-
 .../stegmeny/AktivitetspliktStegmeny.tsx      |  2 +-
 .../vurdering/VurderAktivitet.tsx             |  2 +-
 .../VurderingAktivitetsgradOgUnntak.tsx       |  2 +-
 .../aktivitetsplikt/vurdering/Vurderinger.tsx |  2 +-
 .../aktivitetsgrad/AktivitetsgradIOppgave.tsx |  2 +-
 .../aktivitetsgrad/VisAktivitetsgrad.tsx      |  2 +-
 .../VurderingAktivitetsgradForm.tsx           |  2 +-
 .../unntak/UnntakAktivitetspliktOppgave.tsx   |  2 +-
 .../vurdering/unntak/UnntakIOppgave.tsx       |  2 +-
 .../vurdering/unntak/VisUnntak.tsx            |  2 +-
 .../src/components/behandling/Behandling.tsx  | 10 +--
 .../AktivitetspliktVurdering.tsx              | 10 +--
 .../AktivitetspliktVurdering12MndOversikt.tsx |  2 +-
 .../KravpakkeUtlandBehandling.tsx             |  9 +--
 .../src/components/klage/Klagebehandling.tsx  | 11 ++-
 .../src/components/person/brev/NyttBrev.tsx   | 67 +++++++---------
 .../BehandleJournalfoeringOppgave.tsx         | 61 +++++++--------
 .../Tilbakekrevingsbehandling.tsx             | 10 +--
 .../client/src/shared/styled.tsx              | 29 -------
 29 files changed, 144 insertions(+), 195 deletions(-)
 rename apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/{OppgaveVurderingRoute.tsx => AktivitetspliktOppgaveVurderingRoutes.tsx} (84%)
 delete mode 100644 apps/etterlatte-saksbehandling-ui/client/src/shared/styled.tsx

diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/OppgaveVurderingRoute.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes.tsx
similarity index 84%
rename from apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/OppgaveVurderingRoute.tsx
rename to apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes.tsx
index 3c4a6aaf803..02810db815d 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/OppgaveVurderingRoute.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes.tsx
@@ -1,5 +1,4 @@
 import { StatusBar } from '~shared/statusbar/Statusbar'
-import { GridContainer, MainContent } from '~shared/styled'
 import { Navigate, Route, Routes } from 'react-router-dom'
 import React, { createContext, useContext } from 'react'
 import { AktivitetspliktSidemeny } from '~components/aktivitetsplikt/sidemeny/AktivitetspliktSidemeny'
@@ -12,12 +11,13 @@ import { VurderingInfoBrevOgOppsummering } from '~components/aktivitetsplikt/bre
 import { AktivitetspliktOppgaveVurdering } from '~shared/types/Aktivitetsplikt'
 import { useAktivitetspliktOppgaveVurderingState } from '~store/reducers/Aktivitetsplikt12mnd'
 import { ValgForInfobrev } from '~components/aktivitetsplikt/brev/ValgForInfobrev'
+import { Box, HStack } from '@navikt/ds-react'
 
 const AktivitetspliktOppgaveContext = createContext<AktivitetspliktOppgaveVurdering>(
   {} as AktivitetspliktOppgaveVurdering
 )
 
-export function OppgaveVurderingRoute(props: { vurderingOgOppgave: AktivitetspliktOppgaveVurdering }) {
+export function AktivitetspliktOppgaveVurderingRoutes(props: { vurderingOgOppgave: AktivitetspliktOppgaveVurdering }) {
   const { vurderingOgOppgave } = props
 
   return (
@@ -25,17 +25,17 @@ export function OppgaveVurderingRoute(props: { vurderingOgOppgave: Aktivitetspli
       <StatusBar ident={vurderingOgOppgave.oppgave.fnr} />
       <AktivitetspliktStegmeny />
 
-      <GridContainer>
-        <MainContent>
+      <HStack height="100%" minHeight="100vh" wrap={false}>
+        <Box width="100%">
           <Routes>
             <Route path={AktivitetspliktSteg.VURDERING} element={<VurderAktivitet />} />
             <Route path={AktivitetspliktSteg.BREVVALG} element={<ValgForInfobrev />} />
             <Route path={AktivitetspliktSteg.OPPSUMMERING_OG_BREV} element={<VurderingInfoBrevOgOppsummering />} />
             <Route path="*" element={<Navigate to={AktivitetspliktSteg.VURDERING} replace />} />
           </Routes>
-        </MainContent>
+        </Box>
         <AktivitetspliktSidemeny />
-      </GridContainer>
+      </HStack>
     </AktivitetspliktOppgaveContext.Provider>
   )
 }
@@ -48,7 +48,7 @@ export const useAktivitetspliktOppgaveVurdering = (): AktivitetspliktOppgaveVurd
     }
     return oppgave
   } catch (e) {
-    const msg = 'Kan ikke bruke useOppgaveForVurdering utenfor OppgaveVurderingRoute-treet'
+    const msg = 'Kan ikke bruke useOppgaveForVurdering utenfor AktivitetspliktOppgaveVurderingRoutes-treet'
     console.error(msg)
     throw new Error(msg, { cause: e })
   }
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/VurderAktivitetspliktOppgave.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/VurderAktivitetspliktOppgave.tsx
index 2bb19ac52cd..3c8c8feb6b7 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/VurderAktivitetspliktOppgave.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/VurderAktivitetspliktOppgave.tsx
@@ -5,7 +5,7 @@ import React, { useEffect } from 'react'
 import { isSuccess, mapResult } from '~shared/api/apiUtils'
 import Spinner from '~shared/Spinner'
 import { ApiErrorAlert } from '~ErrorBoundary'
-import { OppgaveVurderingRoute } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { AktivitetspliktOppgaveVurderingRoutes } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { Link } from '@navikt/ds-react'
 import { hentAktivitetspliktOppgaveVurdering } from '~shared/api/aktivitetsplikt'
 import { useDispatch } from 'react-redux'
@@ -41,7 +41,7 @@ export function VurderAktivitetspliktOppgave() {
     ),
     pending: <Spinner visible label="Henter oppgave for vurdering" />,
     success: (oppgave) => {
-      return <>{dataErSatt && <OppgaveVurderingRoute vurderingOgOppgave={oppgave} />}</>
+      return <>{dataErSatt && <AktivitetspliktOppgaveVurderingRoutes vurderingOgOppgave={oppgave} />}</>
     },
     error: (e) => (
       <ApiErrorAlert>{e.detail || 'Kunne ikke hente oppgave for vurderingen av aktivitetsplikt'}</ApiErrorAlert>
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/AktivitetspliktBrev.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/AktivitetspliktBrev.tsx
index db477c2ddd6..73bb134e361 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/AktivitetspliktBrev.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/AktivitetspliktBrev.tsx
@@ -6,13 +6,12 @@ import { BrevProsessType, BrevStatus, IBrev } from '~shared/types/Brev'
 import { mapResult } from '~shared/api/apiUtils'
 import Spinner from '~shared/Spinner'
 import { ApiErrorAlert } from '~ErrorBoundary'
-import { Column, GridContainer } from '~shared/styled'
 import BrevTittel from '~components/person/brev/tittel/BrevTittel'
 import BrevSpraak from '~components/person/brev/spraak/BrevSpraak'
 import { BrevMottakerWrapper } from '~components/person/brev/mottaker/BrevMottakerWrapper'
 import ForhaandsvisningBrev from '~components/behandling/brev/ForhaandsvisningBrev'
 import RedigerbartBrev from '~components/behandling/brev/RedigerbartBrev'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { InfobrevKnapperad } from '~components/aktivitetsplikt/brev/VurderingInfoBrevOgOppsummering'
 import { FerdigstillAktivitetspliktBrevModal } from '~components/aktivitetsplikt/brev/FerdigstillBrevModal'
 import { LoependeUnntakInfo } from '~components/aktivitetsplikt/brev/LoependeUnntakInfo'
@@ -52,52 +51,53 @@ export function Aktivitetspliktbrev({ brevId }: { brevId: number }) {
       const brevErFerdigstilt =
         brev.prosessType === BrevProsessType.OPPLASTET_PDF || brev.status === BrevStatus.DISTRIBUERT
       return (
-        <GridContainer>
-          <Column>
+        <HStack height="100%" minHeight="100vh" wrap={false}>
+          <VStack gap="4" margin="4" minWidth="30rem">
             {endringerHarKommetEtterBrevOpprettelse(brev) && (
               <Alert variant="warning">
                 Vurdering av aktivitet eller valgene for infobrevet er oppdatert etter at brevet ble opprettet. Se nøye
                 over brevet for å se om innholdet stemmer med nåværende verdier.
               </Alert>
             )}
-            <VStack gap="4" margin="4">
-              <Box marginInline="0 8">
-                <Heading size="large">Infobrev aktivitetsplikt</Heading>
-              </Box>
+            <Box marginInline="0 8">
+              <Heading size="large">Infobrev aktivitetsplikt</Heading>
+            </Box>
 
-              <LoependeUnntakInfo />
-              <BrevTittel brevId={brev.id} sakId={brev.sakId} tittel={brev.tittel} kanRedigeres={kanRedigeres} />
-              <BrevSpraak brev={brev} kanRedigeres={false} />
-              {kanRedigeres && (
-                <Alert size="small" variant="info">
-                  For å endre målform i brevet må det endres på forrige steg. Endring i brevvalg vil nullstille
-                  innholdet i brevet.
-                </Alert>
-              )}
+            <LoependeUnntakInfo />
+            <BrevTittel brevId={brev.id} sakId={brev.sakId} tittel={brev.tittel} kanRedigeres={kanRedigeres} />
+            <BrevSpraak brev={brev} kanRedigeres={false} />
+            {kanRedigeres && (
+              <Alert size="small" variant="info">
+                For å endre målform i brevet må det endres på forrige steg. Endring i brevvalg vil nullstille innholdet
+                i brevet.
+              </Alert>
+            )}
 
-              <BrevMottakerWrapper brev={brev} kanRedigeres={kanRedigeres} />
+            <BrevMottakerWrapper brev={brev} kanRedigeres={kanRedigeres} />
+          </VStack>
+
+          <Box borderWidth="0 1" borderColor="border-subtle">
+            <VStack gap="4" width="50rem">
+              {brevErFerdigstilt ? (
+                <>
+                  <Box maxHeight="955px" width="100%" height="100%" marginBlock="0 16">
+                    <ForhaandsvisningBrev brev={brev} />
+                  </Box>
+                  <InfobrevKnapperad />
+                </>
+              ) : (
+                <>
+                  <HStack wrap={false}>
+                    <RedigerbartBrev brev={brev} kanRedigeres={kanRedigeres} tilbakestillingsaction={() => undefined} />
+                  </HStack>
+                  <InfobrevKnapperad>
+                    <FerdigstillAktivitetspliktBrevModal />
+                  </InfobrevKnapperad>
+                </>
+              )}
             </VStack>
-          </Column>
-          <Column>
-            {brevErFerdigstilt ? (
-              <>
-                <Box maxHeight="955px" width="100%" height="100%" marginBlock="0 16">
-                  <ForhaandsvisningBrev brev={brev} />
-                </Box>
-                <InfobrevKnapperad />
-              </>
-            ) : (
-              <>
-                <HStack wrap={false}>
-                  <RedigerbartBrev brev={brev} kanRedigeres={kanRedigeres} tilbakestillingsaction={() => undefined} />
-                </HStack>
-                <InfobrevKnapperad>
-                  <FerdigstillAktivitetspliktBrevModal />
-                </InfobrevKnapperad>
-              </>
-            )}
-          </Column>
-        </GridContainer>
+          </Box>
+        </HStack>
       )
     },
   })
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/FerdigstillAktivitetspliktOppgaveModal.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/FerdigstillAktivitetspliktOppgaveModal.tsx
index 60c53b2f1ff..643716be215 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/FerdigstillAktivitetspliktOppgaveModal.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/FerdigstillAktivitetspliktOppgaveModal.tsx
@@ -1,4 +1,4 @@
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import React, { useState } from 'react'
 import { useApiCall } from '~shared/hooks/useApiCall'
 import { ferdigstillOppgave } from '~shared/api/oppgaver'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/FerdigstillBrevModal.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/FerdigstillBrevModal.tsx
index f938099eed9..cb5eddea2a6 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/FerdigstillBrevModal.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/FerdigstillBrevModal.tsx
@@ -4,7 +4,7 @@ import { setAktivitetspliktOppgave } from '~store/reducers/Aktivitetsplikt12mnd'
 import { useApiCall } from '~shared/hooks/useApiCall'
 import { ferdigstillBrevOgOppgaveAktivitetsplikt } from '~shared/api/aktivitetsplikt'
 import { useDispatch } from 'react-redux'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { isPending, isSuccess, mapFailure, mapSuccess } from '~shared/api/apiUtils'
 import { ApiErrorAlert } from '~ErrorBoundary'
 
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/LoependeUnntakInfo.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/LoependeUnntakInfo.tsx
index a3448dc79e0..3f23a41f05f 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/LoependeUnntakInfo.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/LoependeUnntakInfo.tsx
@@ -1,6 +1,6 @@
 import { Alert } from '@navikt/ds-react'
 import React from 'react'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { IAktivitetspliktVurderingNyDto } from '~shared/types/Aktivitetsplikt'
 
 function loeperUnntakEtterSisteVurdering(vurdering: IAktivitetspliktVurderingNyDto): boolean {
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/UtenBrevVisning.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/UtenBrevVisning.tsx
index 4779483bf7b..ca2450dd33a 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/UtenBrevVisning.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/UtenBrevVisning.tsx
@@ -1,7 +1,7 @@
 import { Oppgavestatus } from '~shared/types/oppgave'
 import { Alert, BodyShort, VStack } from '@navikt/ds-react'
 import React from 'react'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 
 import { InfobrevKnapperad } from '~components/aktivitetsplikt/brev/VurderingInfoBrevOgOppsummering'
 import { FerdigstillAktivitetspliktOppgaveModal } from '~components/aktivitetsplikt/brev/FerdigstillAktivitetspliktOppgaveModal'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/ValgForInfobrev.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/ValgForInfobrev.tsx
index 1c6225b7090..4646b4d219c 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/ValgForInfobrev.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/ValgForInfobrev.tsx
@@ -13,7 +13,7 @@ import { ControlledRadioGruppe } from '~shared/components/radioGruppe/Controlled
 import { isFailureHandler } from '~shared/api/IsFailureHandler'
 import { PencilIcon } from '@navikt/aksel-icons'
 import { Info } from '~components/behandling/soeknadsoversikt/Info'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { erOppgaveRedigerbar } from '~shared/types/oppgave'
 import { useDispatch } from 'react-redux'
 import { setAktivtetspliktbrevdata, setBrevid } from '~store/reducers/Aktivitetsplikt12mnd'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/VurderingInfoBrevOgOppsummering.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/VurderingInfoBrevOgOppsummering.tsx
index d224cb7b6f3..d3d86481ed7 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/VurderingInfoBrevOgOppsummering.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/brev/VurderingInfoBrevOgOppsummering.tsx
@@ -1,6 +1,6 @@
 import { Box, Button, Heading, HStack } from '@navikt/ds-react'
 import { useSidetittel } from '~shared/hooks/useSidetittel'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import React from 'react'
 import { Aktivitetspliktbrev } from '~components/aktivitetsplikt/brev/AktivitetspliktBrev'
 import { UtenBrevVisning } from '~components/aktivitetsplikt/brev/UtenBrevVisning'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/sidemeny/AktivitetspliktSidemeny.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/sidemeny/AktivitetspliktSidemeny.tsx
index 7d009e9e1fe..1c69505e52d 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/sidemeny/AktivitetspliktSidemeny.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/sidemeny/AktivitetspliktSidemeny.tsx
@@ -1,4 +1,4 @@
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { Sidebar, SidebarPanel } from '~shared/components/Sidebar'
 import { BodyShort, Heading, Label, VStack } from '@navikt/ds-react'
 import { formaterOppgaveStatus } from '~utils/formatering/formatering'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/stegmeny/AktivitetspliktStegmeny.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/stegmeny/AktivitetspliktStegmeny.tsx
index fe1aa8ccddc..25d82ae0453 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/stegmeny/AktivitetspliktStegmeny.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/stegmeny/AktivitetspliktStegmeny.tsx
@@ -2,7 +2,7 @@ import { StegMenyBox } from '~components/behandling/StegMeny/stegmeny'
 import { HStack } from '@navikt/ds-react'
 import React from 'react'
 import { AktivitetNavLenke } from '~components/aktivitetsplikt/stegmeny/AktivitetspliktNavLenke'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 
 export enum AktivitetspliktSteg {
   VURDERING = 'vurdering',
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/VurderAktivitet.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/VurderAktivitet.tsx
index f4fab189cb1..f54daeb9809 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/VurderAktivitet.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/VurderAktivitet.tsx
@@ -8,7 +8,7 @@ import { AktivitetspliktTidslinje } from '~components/behandling/aktivitetsplikt
 import { useApiCall } from '~shared/hooks/useApiCall'
 import { hentFamilieOpplysninger } from '~shared/api/pdltjenester'
 import { velgDoedsdato } from '~components/person/aktivitet/Aktivitet'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { useNavigate } from 'react-router'
 import { AktivitetspliktSteg } from '~components/aktivitetsplikt/stegmeny/AktivitetspliktStegmeny'
 import { AktivitetspliktVurdering12MndOversikt } from '~components/behandling/aktivitetsplikt/AktivitetspliktVurdering12MndOversikt'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/VurderingAktivitetsgradOgUnntak.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/VurderingAktivitetsgradOgUnntak.tsx
index 006d028d3b5..a2736bdd1c0 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/VurderingAktivitetsgradOgUnntak.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/VurderingAktivitetsgradOgUnntak.tsx
@@ -7,7 +7,7 @@ import {
   tekstAktivitetspliktVurderingType,
   teksterAktivitetspliktSkjoennsmessigVurdering,
 } from '~shared/types/Aktivitetsplikt'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { addMonths, startOfMonth } from 'date-fns'
 import { maanederForVurdering } from '~components/aktivitetsplikt/vurdering/aktivitetsgrad/VurderingAktivitetsgradForm'
 import { useApiCall } from '~shared/hooks/useApiCall'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/Vurderinger.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/Vurderinger.tsx
index 49e3489ccf6..8695544519c 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/Vurderinger.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/Vurderinger.tsx
@@ -1,4 +1,4 @@
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import React from 'react'
 import { erOppgaveRedigerbar } from '~shared/types/oppgave'
 import { BodyShort, Box, Heading, VStack } from '@navikt/ds-react'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/AktivitetsgradIOppgave.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/AktivitetsgradIOppgave.tsx
index d0db14cbd5a..0a2ebc18f79 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/AktivitetsgradIOppgave.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/AktivitetsgradIOppgave.tsx
@@ -2,7 +2,7 @@ import { tekstAktivitetspliktVurderingType } from '~shared/types/Aktivitetsplikt
 import { BodyShort, Box, Detail, ReadMore, Table, VStack } from '@navikt/ds-react'
 import { formaterDato, formaterDatoMedFallback } from '~utils/formatering/dato'
 import React from 'react'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { VisAktivitetsgrad } from '~components/aktivitetsplikt/vurdering/aktivitetsgrad/VisAktivitetsgrad'
 
 export function AktivitetsgradIOppgave() {
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/VisAktivitetsgrad.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/VisAktivitetsgrad.tsx
index 29f9f5c2a2e..6f6d6d06a22 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/VisAktivitetsgrad.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/VisAktivitetsgrad.tsx
@@ -3,7 +3,7 @@ import {
   IAktivitetspliktVurderingNyDto,
   teksterAktivitetspliktSkjoennsmessigVurdering,
 } from '~shared/types/Aktivitetsplikt'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { useApiCall } from '~shared/hooks/useApiCall'
 import { slettAktivitetspliktVurdering } from '~shared/api/aktivitetsplikt'
 import React, { useState } from 'react'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/VurderingAktivitetsgradForm.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/VurderingAktivitetsgradForm.tsx
index 0bf7c68ca8d..f2df94d47c7 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/VurderingAktivitetsgradForm.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/aktivitetsgrad/VurderingAktivitetsgradForm.tsx
@@ -8,7 +8,7 @@ import {
   tekstAktivitetspliktVurderingType,
   teksterAktivitetspliktSkjoennsmessigVurdering,
 } from '~shared/types/Aktivitetsplikt'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { useApiCall } from '~shared/hooks/useApiCall'
 import { opprettAktivitetspliktAktivitetsgrad } from '~shared/api/aktivitetsplikt'
 import { useForm } from 'react-hook-form'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/UnntakAktivitetspliktOppgave.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/UnntakAktivitetspliktOppgave.tsx
index 445a13dd6ae..bf1102bacdc 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/UnntakAktivitetspliktOppgave.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/UnntakAktivitetspliktOppgave.tsx
@@ -11,7 +11,7 @@ import { FloppydiskIcon } from '@navikt/aksel-icons'
 import React from 'react'
 import { useApiCall } from '~shared/hooks/useApiCall'
 import { opprettAktivitetspliktUnntak } from '~shared/api/aktivitetsplikt'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { isFailure, isPending } from '~shared/api/apiUtils'
 import { ApiErrorAlert } from '~ErrorBoundary'
 import { startOfMonth } from 'date-fns'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/UnntakIOppgave.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/UnntakIOppgave.tsx
index 1c1d75796d7..1d83d829d48 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/UnntakIOppgave.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/UnntakIOppgave.tsx
@@ -3,7 +3,7 @@ import { tekstAktivitetspliktUnntakType } from '~shared/types/Aktivitetsplikt'
 import { BodyShort, Box, Detail, ReadMore, Table, VStack } from '@navikt/ds-react'
 import { AktivitetspliktUnntakTypeTag } from '~shared/tags/AktivitetspliktUnntakTypeTag'
 import { formaterDato, formaterDatoMedFallback } from '~utils/formatering/dato'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { VisUnntak } from '~components/aktivitetsplikt/vurdering/unntak/VisUnntak'
 
 export function UnntakIOppgave() {
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/VisUnntak.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/VisUnntak.tsx
index 4cb2768fe6d..ea6e9100530 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/VisUnntak.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/aktivitetsplikt/vurdering/unntak/VisUnntak.tsx
@@ -1,5 +1,5 @@
 import { IAktivitetspliktUnntak, IAktivitetspliktVurderingNyDto } from '~shared/types/Aktivitetsplikt'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import React, { useState } from 'react'
 import { useApiCall } from '~shared/hooks/useApiCall'
 import { slettAktivitetspliktUnntak } from '~shared/api/aktivitetsplikt'
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/Behandling.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/Behandling.tsx
index 7cefbbc69c6..bcadcedd650 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/Behandling.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/Behandling.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { Navigate, Route, Routes, useParams } from 'react-router-dom'
 import { hentBehandling } from '~shared/api/behandling'
-import { GridContainer, MainContent } from '~shared/styled'
 import { IBehandlingReducer, resetBehandling, setBehandling } from '~store/reducers/BehandlingReducer'
 import { StatusBar } from '~shared/statusbar/Statusbar'
 import { BehandlingRouteContext, useBehandlingRoutes } from './BehandlingRoutes'
@@ -18,6 +17,7 @@ import { mapResult } from '~shared/api/apiUtils'
 import { useSidetittel } from '~shared/hooks/useSidetittel'
 import { StickyToppMeny } from '~shared/StickyToppMeny'
 import { usePersonopplysninger } from '~components/person/usePersonopplysninger'
+import { Box, HStack } from '@navikt/ds-react'
 
 export const Behandling = () => {
   useSidetittel('Behandling')
@@ -68,17 +68,17 @@ export const Behandling = () => {
               <StatusBar ident={soeker?.foedselsnummer} />
               <StegMeny behandling={behandling} />
             </StickyToppMeny>
-            <GridContainer>
-              <MainContent>
+            <HStack height="100%" minHeight="100vh" wrap={false}>
+              <Box width="100%">
                 <Routes>
                   {routedata.behandlingRoutes.map((route) => (
                     <Route key={route.path} path={route.path} element={route.element(behandling)} />
                   ))}
                   <Route path="*" element={<Navigate to={routedata.behandlingRoutes[0].path} replace />} />
                 </Routes>
-              </MainContent>
+              </Box>
               <BehandlingSidemeny behandling={behandling} />
-            </GridContainer>
+            </HStack>
           </BehandlingRouteContext.Provider>
         )
       }
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/aktivitetsplikt/AktivitetspliktVurdering.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/aktivitetsplikt/AktivitetspliktVurdering.tsx
index d398e5c7a13..e1428a99587 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/aktivitetsplikt/AktivitetspliktVurdering.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/aktivitetsplikt/AktivitetspliktVurdering.tsx
@@ -1,6 +1,7 @@
 import {
   Alert,
   BodyLong,
+  Box,
   Button,
   Heading,
   HStack,
@@ -35,7 +36,6 @@ import Spinner from '~shared/Spinner'
 import { ControlledRadioGruppe } from '~shared/components/radioGruppe/ControlledRadioGruppe'
 import { ControlledDatoVelger } from '~shared/components/datoVelger/ControlledDatoVelger'
 import { IDetaljertBehandling } from '~shared/types/IDetaljertBehandling'
-import styled from 'styled-components'
 import { Toast } from '~shared/alerts/Toast'
 import { AktivitetspliktVurderingVisning } from '~components/behandling/aktivitetsplikt/AktivitetspliktVurderingVisning'
 import { useInnloggetSaksbehandler } from '~components/behandling/useInnloggetSaksbehandler'
@@ -183,7 +183,7 @@ export const AktivitetspliktVurdering = ({
   const harUnntak = watch('unntak')
 
   return (
-    <AktivitetspliktVurderingWrapper>
+    <Box maxWidth="32rem">
       <Heading size="small" spacing>
         Vurdering av aktivitetsplikt
       </Heading>
@@ -342,10 +342,6 @@ export const AktivitetspliktVurdering = ({
       {isFailure(hentet) && hentet.error.status !== 404 && (
         <ApiErrorAlert>{hentet.error.detail || 'Det oppsto en feil ved henting av vurdering'}</ApiErrorAlert>
       )}
-    </AktivitetspliktVurderingWrapper>
+    </Box>
   )
 }
-
-const AktivitetspliktVurderingWrapper = styled.div`
-  max-width: 500px;
-`
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/aktivitetsplikt/AktivitetspliktVurdering12MndOversikt.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/aktivitetsplikt/AktivitetspliktVurdering12MndOversikt.tsx
index d88536a061b..6e0e48e1940 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/aktivitetsplikt/AktivitetspliktVurdering12MndOversikt.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/behandling/aktivitetsplikt/AktivitetspliktVurdering12MndOversikt.tsx
@@ -1,7 +1,7 @@
 import { BodyShort, Box, Heading, VStack } from '@navikt/ds-react'
 import React from 'react'
 import { AktivitetspliktStatusTagOgGyldig } from '~shared/tags/AktivitetspliktStatusOgGyldig'
-import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/OppgaveVurderingRoute'
+import { useAktivitetspliktOppgaveVurdering } from '~components/aktivitetsplikt/AktivitetspliktOppgaveVurderingRoutes'
 import { AktivitetspliktOppgaveType } from '~shared/types/Aktivitetsplikt'
 
 export const AktivitetspliktVurdering12MndOversikt = () => {
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/generellbehandling/KravpakkeUtlandBehandling.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/generellbehandling/KravpakkeUtlandBehandling.tsx
index b3f8f8570d6..96750e4503d 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/generellbehandling/KravpakkeUtlandBehandling.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/generellbehandling/KravpakkeUtlandBehandling.tsx
@@ -4,7 +4,6 @@ import {
   generellbehandlingErRedigerbar,
   KravpakkeUtland,
 } from '~shared/types/Generellbehandling'
-import { GridContainer, MainContent } from '~shared/styled'
 import {
   Alert,
   BodyShort,
@@ -160,8 +159,8 @@ const KravpakkeUtlandBehandling = (props: {
   }
 
   return (
-    <GridContainer>
-      <MainContent style={{ whiteSpace: 'pre-wrap' }}>
+    <HStack height="100%" minHeight="100vh" wrap={false}>
+      <Box width="100%" style={{ whiteSpace: 'pre-wrap' }}>
         <div style={{ maxWidth: '55rem', margin: 'auto' }}>
           <Box paddingInline="16" paddingBlock="16 4">
             <Heading spacing size="large" level="1">
@@ -489,9 +488,9 @@ const KravpakkeUtlandBehandling = (props: {
             </HStack>
           </Box>
         </div>
-      </MainContent>
+      </Box>
       <GenerellbehandlingSidemeny utlandsBehandling={generellBehandlingMedLocalState} />
-    </GridContainer>
+    </HStack>
   )
 }
 export default KravpakkeUtlandBehandling
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/klage/Klagebehandling.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/klage/Klagebehandling.tsx
index 1c760703dbf..33760c4f22b 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/klage/Klagebehandling.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/klage/Klagebehandling.tsx
@@ -6,13 +6,11 @@ import { addKlage, resetKlage } from '~store/reducers/KlageReducer'
 import { useApiCall } from '~shared/hooks/useApiCall'
 import { StatusBar } from '~shared/statusbar/Statusbar'
 import Spinner from '~shared/Spinner'
-import { GridContainer, MainContent } from '~shared/styled'
 import { hentKlage } from '~shared/api/klage'
 import { KlageStegmeny } from '~components/klage/stegmeny/KlageStegmeny'
 import { KlageOppsummering } from '~components/klage/oppsummering/KlageOppsummering'
 import { KlageSidemeny } from '~components/klage/sidemeny/KlageSidemeny'
 import { KlageBrev } from '~components/klage/brev/KlageBrev'
-
 import { isPending } from '~shared/api/apiUtils'
 import { isFailureHandler } from '~shared/api/IsFailureHandler'
 import { KlageFormkrav } from '~components/klage/formkrav/KlageFormkrav'
@@ -20,6 +18,7 @@ import { KlageVurdering } from '~components/klage/vurdering/KlageVurdering'
 import { enhetErSkrivbar } from '~components/behandling/felles/utils'
 import { useSidetittel } from '~shared/hooks/useSidetittel'
 import { useInnloggetSaksbehandler } from '~components/behandling/useInnloggetSaksbehandler'
+import { Box, HStack } from '@navikt/ds-react'
 
 export function Klagebehandling() {
   useSidetittel('Klage')
@@ -66,8 +65,8 @@ export function Klagebehandling() {
       <Spinner visible={isPending(fetchKlageStatus)} label="Henter klagebehandling" />
 
       {klage !== null && viHarLastetRiktigKlage && (
-        <GridContainer>
-          <MainContent>
+        <HStack height="100%" minHeight="100vh" wrap={false}>
+          <Box width="100%">
             <Routes>
               <Route path="formkrav" element={<KlageFormkrav kanRedigere={kanRedigere} />} />
               <Route path="vurdering" element={<KlageVurdering kanRedigere={kanRedigere} />} />
@@ -75,9 +74,9 @@ export function Klagebehandling() {
               <Route path="oppsummering" element={<KlageOppsummering kanRedigere={kanRedigere} />} />
               <Route path="*" element={<Navigate to="formkrav" replace />} />
             </Routes>
-          </MainContent>
+          </Box>
           <KlageSidemeny />
-        </GridContainer>
+        </HStack>
       )}
 
       {isFailureHandler({
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/person/brev/NyttBrev.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/person/brev/NyttBrev.tsx
index f7677826c8e..a474aea6846 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/person/brev/NyttBrev.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/person/brev/NyttBrev.tsx
@@ -3,20 +3,17 @@ import { useApiCall } from '~shared/hooks/useApiCall'
 import { useParams } from 'react-router-dom'
 import { hentBrev } from '~shared/api/brev'
 import React, { useEffect, useState } from 'react'
-import { Column, GridContainer } from '~shared/styled'
 import { StatusBar } from '~shared/statusbar/Statusbar'
 import NavigerTilbakeMeny from '~components/person/NavigerTilbakeMeny'
 import { BrevProsessType, BrevStatus, Spraak } from '~shared/types/Brev'
 import ForhaandsvisningBrev from '~components/behandling/brev/ForhaandsvisningBrev'
-import styled from 'styled-components'
 import NyttBrevHandlingerPanel from '~components/person/brev/NyttBrevHandlingerPanel'
 import BrevStatusPanel from '~components/person/brev/BrevStatusPanel'
 import Spinner from '~shared/Spinner'
 import { ApiErrorAlert } from '~ErrorBoundary'
 import BrevTittel from '~components/person/brev/tittel/BrevTittel'
-
 import { mapApiResult, mapSuccess } from '~shared/api/apiUtils'
-import { BodyShort, Box, Detail, Heading, VStack } from '@navikt/ds-react'
+import { BodyShort, Box, Detail, Heading, HStack, VStack } from '@navikt/ds-react'
 import { useSidetittel } from '~shared/hooks/useSidetittel'
 import { BrevMottakerWrapper } from '~components/person/brev/mottaker/BrevMottakerWrapper'
 import { formaterSpraak } from '~utils/formatering/formatering'
@@ -58,35 +55,31 @@ export default function NyttBrev() {
           <ApiErrorAlert>Feil oppsto ved henting av brev</ApiErrorAlert>
         ),
         (brev) => (
-          <GridContainer>
-            <Column>
-              <VStack gap="4" margin="4">
-                <BrevTittel
-                  brevId={brev.id}
-                  sakId={brev.sakId}
-                  tittel={brev.tittel}
-                  kanRedigeres={kanRedigeres}
-                  manueltBrev={brev.spraak !== Spraak.NB}
-                />
+          <HStack height="100%" minHeight="100vh" wrap={false}>
+            <VStack gap="4" margin="4" minWidth="30rem">
+              <BrevTittel
+                brevId={brev.id}
+                sakId={brev.sakId}
+                tittel={brev.tittel}
+                kanRedigeres={kanRedigeres}
+                manueltBrev={brev.spraak !== Spraak.NB}
+              />
 
-                <Box padding="4" borderWidth="1" borderRadius="small">
-                  <VStack gap="2" justify="space-between">
-                    <Heading level="2" size="medium">
-                      Språk / målform
-                    </Heading>
-                    <BodyShort spacing>{formaterSpraak(brev.spraak)}</BodyShort>
-                    <Detail>For å endre språk må du opprette et nytt manuelt brev.</Detail>
-                  </VStack>
-                </Box>
+              <Box padding="4" borderWidth="1" borderRadius="small">
+                <VStack gap="2" justify="space-between">
+                  <Heading level="2" size="medium">
+                    Språk / målform
+                  </Heading>
+                  <BodyShort spacing>{formaterSpraak(brev.spraak)}</BodyShort>
+                  <Detail>For å endre språk må du opprette et nytt manuelt brev.</Detail>
+                </VStack>
+              </Box>
 
-                <BrevMottakerWrapper brev={brev} kanRedigeres={kanRedigeres} />
-              </VStack>
-            </Column>
-            <Column>
+              <BrevMottakerWrapper brev={brev} kanRedigeres={kanRedigeres} />
+            </VStack>
+            <Box minWidth="50rem" width="100%" borderWidth="0 1" borderColor="border-subtle">
               {brev.prosessType === BrevProsessType.OPPLASTET_PDF || brev.status === BrevStatus.DISTRIBUERT ? (
-                <PanelWrapper>
-                  <ForhaandsvisningBrev brev={brev} />
-                </PanelWrapper>
+                <ForhaandsvisningBrev brev={brev} />
               ) : (
                 <RedigerbartBrev
                   brev={brev}
@@ -94,8 +87,8 @@ export default function NyttBrev() {
                   tilbakestillingsaction={() => setTilbakestilt(true)}
                 />
               )}
-            </Column>
-            <Column>
+            </Box>
+            <Box minWidth="30rem">
               <BrevStatusPanel brev={brev} />
               <Box padding="4" borderRadius="small">
                 <Heading spacing level="2" size="medium">
@@ -103,16 +96,10 @@ export default function NyttBrev() {
                 </Heading>
                 <NyttBrevHandlingerPanel brev={brev} setKanRedigeres={setKanRedigeres} />
               </Box>
-            </Column>
-          </GridContainer>
+            </Box>
+          </HStack>
         )
       )}
     </>
   )
 }
-
-const PanelWrapper = styled.div`
-  height: 100%;
-  width: 100%;
-  max-height: 955px;
-`
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/person/journalfoeringsoppgave/BehandleJournalfoeringOppgave.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/person/journalfoeringsoppgave/BehandleJournalfoeringOppgave.tsx
index 4a7118629a5..b61ff315ed6 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/person/journalfoeringsoppgave/BehandleJournalfoeringOppgave.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/person/journalfoeringsoppgave/BehandleJournalfoeringOppgave.tsx
@@ -4,7 +4,6 @@ import { Route, Routes, useParams } from 'react-router-dom'
 import NavigerTilbakeMeny from '~components/person/NavigerTilbakeMeny'
 import { useJournalfoeringOppgave } from '~components/person/journalfoeringsoppgave/useJournalfoeringOppgave'
 import VelgJournalpost from '~components/person/journalfoeringsoppgave/VelgJournalpost'
-import { Column, GridContainer } from '~shared/styled'
 import styled from 'styled-components'
 import {
   settBruker,
@@ -33,7 +32,7 @@ import { hentJournalpost } from '~shared/api/dokument'
 import { JournalpostInnhold } from './journalpost/JournalpostInnhold'
 import { StatusBar } from '~shared/statusbar/Statusbar'
 import { useSidetittel } from '~shared/hooks/useSidetittel'
-import { Alert, Box } from '@navikt/ds-react'
+import { Alert, Box, HStack } from '@navikt/ds-react'
 import { StickyToppMeny } from '~shared/StickyToppMeny'
 import { logger } from '~utils/logger'
 
@@ -94,39 +93,37 @@ export default function BehandleJournalfoeringOppgave() {
         <NavigerTilbakeMeny to="/">Tilbake til oppgavebenken</NavigerTilbakeMeny>
       </StickyToppMeny>
 
-      <GridContainer>
-        <Column>
-          <Box padding="8">
-            {!sakMedBehandlinger || isPendingOrInitial(journalpostStatus) ? (
-              <Spinner label="Laster journalpost" />
-            ) : isSuccess(journalpostStatus) && kanEndreJournalpost(journalpostStatus.data) ? (
-              <OppdaterJournalpost
-                initialJournalpost={journalpostStatus.data}
-                sak={sakMedBehandlinger.sak}
-                oppgaveId={oppgaveId!!}
-              />
-            ) : (
-              <Routes>
-                <Route index element={<StartOppgavebehandling />} />
+      <HStack height="100%" minHeight="100vh" wrap={false}>
+        <Box padding="8" minWidth="40rem">
+          {!sakMedBehandlinger || isPendingOrInitial(journalpostStatus) ? (
+            <Spinner label="Laster journalpost" />
+          ) : isSuccess(journalpostStatus) && kanEndreJournalpost(journalpostStatus.data) ? (
+            <OppdaterJournalpost
+              initialJournalpost={journalpostStatus.data}
+              sak={sakMedBehandlinger.sak}
+              oppgaveId={oppgaveId!!}
+            />
+          ) : (
+            <Routes>
+              <Route index element={<StartOppgavebehandling />} />
 
-                <Route path="nybehandling">
-                  <Route index element={<OpprettNyBehandling />} />
-                  <Route path="oppsummering" element={<OppsummeringOppgavebehandling />} />
-                </Route>
-                <Route path="oppretteklage">
-                  <Route index element={<OpprettKlagebehandling />} />
-                  <Route path="oppsummering" element={<OppsummeringKlagebehandling />} />
-                </Route>
+              <Route path="nybehandling">
+                <Route index element={<OpprettNyBehandling />} />
+                <Route path="oppsummering" element={<OppsummeringOppgavebehandling />} />
+              </Route>
+              <Route path="oppretteklage">
+                <Route index element={<OpprettKlagebehandling />} />
+                <Route path="oppsummering" element={<OppsummeringKlagebehandling />} />
+              </Route>
 
-                <Route path="ferdigstill" element={<FerdigstillOppgave />} />
-              </Routes>
-            )}
-          </Box>
-        </Column>
+              <Route path="ferdigstill" element={<FerdigstillOppgave />} />
+            </Routes>
+          )}
+        </Box>
 
-        <Column>
+        <Box minWidth="50rem" width="100%" borderWidth="0 1" borderColor="border-subtle">
           <VelgJournalpost journalpostStatus={journalpostStatus} />
-        </Column>
+        </Box>
 
         <Sidebar>
           {oppgave && <OppgaveDetaljer oppgave={oppgave} />}
@@ -141,7 +138,7 @@ export default function BehandleJournalfoeringOppgave() {
               )
           )}
         </Sidebar>
-      </GridContainer>
+      </HStack>
     </>
   )
 }
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/components/tilbakekreving/Tilbakekrevingsbehandling.tsx b/apps/etterlatte-saksbehandling-ui/client/src/components/tilbakekreving/Tilbakekrevingsbehandling.tsx
index 72bfb2751e7..16a3e5ace38 100644
--- a/apps/etterlatte-saksbehandling-ui/client/src/components/tilbakekreving/Tilbakekrevingsbehandling.tsx
+++ b/apps/etterlatte-saksbehandling-ui/client/src/components/tilbakekreving/Tilbakekrevingsbehandling.tsx
@@ -4,7 +4,6 @@ import { useAppDispatch } from '~store/Store'
 import { useApiCall } from '~shared/hooks/useApiCall'
 import { StatusBar } from '~shared/statusbar/Statusbar'
 import Spinner from '~shared/Spinner'
-import { GridContainer, MainContent } from '~shared/styled'
 import { hentTilbakekreving } from '~shared/api/tilbakekreving'
 import { addTilbakekreving, resetTilbakekreving } from '~store/reducers/TilbakekrevingReducer'
 import { useTilbakekreving } from '~components/tilbakekreving/useTilbakekreving'
@@ -21,6 +20,7 @@ import { useSidetittel } from '~shared/hooks/useSidetittel'
 import { TilbakekrevingUtbetalinger } from '~components/tilbakekreving/utbetalinger/TilbakekrevingUtbetalinger'
 import { TilbakekrevingOppsummering } from '~components/tilbakekreving/oppsummering/TilbakekrevingOppsummering'
 import { useInnloggetSaksbehandler } from '~components/behandling/useInnloggetSaksbehandler'
+import { Box, HStack } from '@navikt/ds-react'
 
 export function Tilbakekrevingsbehandling() {
   useSidetittel('Tilbakekreving')
@@ -61,8 +61,8 @@ export function Tilbakekrevingsbehandling() {
       <Spinner visible={isPending(fetchTilbakekrevingStatus)} label="Henter tilbakekrevingsbehandling" />
 
       {!!tilbakekreving && viHarLastetRiktigTilbakekreving && (
-        <GridContainer>
-          <MainContent>
+        <HStack height="100%" minHeight="100vh" wrap={false}>
+          <Box width="100%">
             <Routes>
               <Route
                 path="vurdering"
@@ -79,9 +79,9 @@ export function Tilbakekrevingsbehandling() {
               <Route path="brev" element={<TilbakekrevingBrev behandling={tilbakekreving} redigerbar={redigerbar} />} />
               <Route path="*" element={<Navigate to="vurdering" replace />} />
             </Routes>
-          </MainContent>
+          </Box>
           <TilbakekrevingSidemeny />
-        </GridContainer>
+        </HStack>
       )}
 
       {isFailureHandler({
diff --git a/apps/etterlatte-saksbehandling-ui/client/src/shared/styled.tsx b/apps/etterlatte-saksbehandling-ui/client/src/shared/styled.tsx
deleted file mode 100644
index 81f0c857f1b..00000000000
--- a/apps/etterlatte-saksbehandling-ui/client/src/shared/styled.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import styled from 'styled-components'
-import { Box } from '@navikt/ds-react'
-
-export const GridContainer = styled.div`
-  display: flex;
-  height: 100%;
-  min-height: 100vh;
-`
-
-export const Column = styled.div`
-  min-width: 30rem;
-  &:nth-child(2) {
-    flex-grow: 1;
-    border-right: 1px solid #c6c2bf;
-    border-left: 1px solid #c6c2bf;
-    width: 800px;
-    min-width: 800px;
-  }
-  &:last-child {
-    width: 320px;
-    border-right: none;
-  }
-`
-
-export const MainContent = styled(Box)`
-  width: 100%;
-  border-width: 0 1px 0 0;
-  border-color: var(--a-border-subtle);
-`