Flytter content til samme linje (venstre) som header

navikt · Aug 22, 2023 · 04c27a4 · 04c27a4
1 parent a4239c2
commit 04c27a4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 34 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-const Style = styled.div`
-    max-width: 50rem;
+const Style = styled.main`
+    max-width: 60rem;
     min-height: 100vh;
     padding-top: 16px;
     margin: 0 auto;
@@ -10,19 +10,8 @@ const Style = styled.div`
 
     // Overskriver bakgrunnsfarge på secondary button i ds-css
     --ac-button-secondary-bg: var(--a-surface-default);
-    > * {
-        margin-left: auto;
-        margin-right: auto;
-    }
 `;
 
 export const Layout = ({ children }) => {
-    return (
-        <div className="content">
-            <Style>
-                {children}
-                {/* footer could go here */}
-            </Style>
-        </div>
-    );
+    return <Style>{children}</Style>;
 };
diff --git a/components/SoknadHeader.tsx b/components/SoknadHeader.tsx
@@ -12,10 +12,10 @@ export const StyledDetail = styled(Detail)`
 `;
 
 export const Style = styled.div`
-    > * {
+    & > * {
         max-width: 60rem;
-        margin-left: 16px;
-        margin-right: 16px;
+        padding-left: 16px;
+        padding-right: 16px;
     }
 
     align-items: center;

diff --git a/components/VedleggsListe.tsx b/components/VedleggsListe.tsx
@@ -33,6 +33,7 @@ const Style = styled.div`
     padding-top: 44px;
     margin-bottom: 44px;
     outline: none;
+    max-width: 50rem;
 `;
 
 export interface VedleggsListeProps {

diff --git a/pages/[innsendingsId].tsx b/pages/[innsendingsId].tsx
@@ -48,29 +48,27 @@ const InnsendingsSide: NextPage = () => {
     }, [innsendingsId, router, changeLang]);
 
     return (
-        <div>
+        <>
             <Head>
                 <title>
                     {soknad ? soknad.tittel : 'Laster søknad'}
                 </title>
             </Head>
-            <main>
-                {soknad && (
-                    <>
-                        <SoknadHeader
-                            soknadoverskrift={soknad.tittel}
-                            skjemanr={soknad.skjemanr}
-                        />
+            {soknad && (
+                <>
+                    <SoknadHeader
+                        soknadoverskrift={soknad.tittel}
+                        skjemanr={soknad.skjemanr}
+                    />
 
-                        <VedleggsListe
-                            soknad={soknad}
-                            setSoknad={setSoknad}
-                            erEttersending={erEttersending}
-                        />
-                    </>
-                )}
-            </main>
-        </div>
+                    <VedleggsListe
+                        soknad={soknad}
+                        setSoknad={setSoknad}
+                        erEttersending={erEttersending}
+                    />
+                </>
+            )}
+        </>
     );
 };