From 88f460c475cc09d7ab5622aaa2829762d482acb6 Mon Sep 17 00:00:00 2001
From: Halvor Haugan <halvor.haugan@nav.no>
Date: Mon, 11 Nov 2024 17:02:05 +0100
Subject: [PATCH 1/4] [aksel.nav.no] Update examples of Page

---
 .../code-examples/CodeExamples.tsx            |  1 +
 .../website-modules/TextWithMarkdownLink.tsx  | 20 ++++++++++++-------
 .../examples/examples.module.css              |  4 ++++
 .../examples/withDsExample.tsx                |  6 ++++--
 .../eksempler/primitive-page/background.tsx   |  4 ++--
 .../eksempler/primitive-page/below-fold.tsx   |  4 ++--
 .../primitive-page/content-block-padding.tsx  |  4 ++--
 .../pages/eksempler/primitive-page/demo.tsx   |  3 +--
 .../eksempler/primitive-page/gutters.tsx      |  4 ++--
 .../pages/eksempler/primitive-page/width.tsx  | 11 +++++-----
 10 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx b/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
index 6082a72ec7..9cae0a5e22 100644
--- a/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
+++ b/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
@@ -161,6 +161,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                       invisible: unloaded,
                     },
                   )}
+                  style={{ maxHeight: "calc(100vh - 200px)" }}
                 />
                 {unloaded && (
                   <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
diff --git a/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx b/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx
index ab5f2757a8..128a3dfaf9 100644
--- a/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx
+++ b/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx
@@ -1,24 +1,30 @@
 import React from "react";
 import AkselLink from "@/web/AkselLink";
+import InlineCode from "./InlineCode";
 
 /**
  * Splits a string into text and links,
  * and returns an array of React elements.
  */
 const TextWithMarkdownLink = ({ children: input }: { children: string }) => {
-  const regex = /\[([^\]]+)\]\(([^\s)]+)\)/g;
+  const regex = /\[([^\]]+)\]\(([^\s)]+)\)|`([^`]+)`/g;
   let lastIndex = 0;
   const elements: React.ReactNode[] = [];
 
-  input.replace(regex, (match, text, url, index) => {
+  input.replace(regex, (match, text, url, code, index) => {
     if (index > lastIndex) {
       elements.push(input.slice(lastIndex, index));
     }
-    elements.push(
-      <AkselLink href={url} key={index}>
-        {text}
-      </AkselLink>,
-    );
+
+    if (code) {
+      elements.push(<InlineCode key={index}>{code}</InlineCode>);
+    } else {
+      elements.push(
+        <AkselLink href={url} key={index}>
+          {text}
+        </AkselLink>,
+      );
+    }
 
     lastIndex = index + match.length;
     return match;
diff --git a/aksel.nav.no/website/components/website-modules/examples/examples.module.css b/aksel.nav.no/website/components/website-modules/examples/examples.module.css
index f427563c0a..271e607e0d 100644
--- a/aksel.nav.no/website/components/website-modules/examples/examples.module.css
+++ b/aksel.nav.no/website/components/website-modules/examples/examples.module.css
@@ -36,3 +36,7 @@
 .containerStaticFull {
   padding-block: 1.5rem;
 }
+
+.containerFullscreen {
+  padding: 0;
+}
diff --git a/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx b/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx
index a2a408d54e..993473f2d9 100644
--- a/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx
+++ b/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx
@@ -12,11 +12,12 @@ import styles from "./examples.module.css";
 
 type withDsT = {
   /**
-   * Full: No horizontal centering (i.e. full width).
+   * Full: No horizontal centering (i.e. full width with padding).
    * Static: No vertical centering and static (but responsive) width. Used for dynamic-height examples like ExpansionCard.
    * Static-full: No centering in any direction.
+   * Fullscreen: No centering and no padding.
    */
-  variant?: "full" | "static" | "static-full";
+  variant?: "full" | "static" | "static-full" | "fullscreen";
   background?: "inverted" | "subtle";
   showBreakpoints?: boolean;
 };
@@ -84,6 +85,7 @@ export const withDsExample = (
           [styles.containerStatic]: variant === "static",
           [styles.containerFull]: variant === "full",
           [styles.containerStaticFull]: variant === "static-full",
+          [styles.containerFullscreen]: variant === "fullscreen",
         })}
         style={{ background: getBg(background) }}
       >
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/background.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/background.tsx
index 8239391fdc..3735bca8f9 100644
--- a/aksel.nav.no/website/pages/eksempler/primitive-page/background.tsx
+++ b/aksel.nav.no/website/pages/eksempler/primitive-page/background.tsx
@@ -29,7 +29,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -40,5 +40,5 @@ export const Demo = {
 export const args = {
   index: 5,
   title: "Bakgrunn",
-  desc: "Background-prop lar deg velge mellom `default` og `subtle` bakgrunn.",
+  desc: "Propen `background` lar deg velge mellom `default` og `subtle` bakgrunn.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/below-fold.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/below-fold.tsx
index 988fb9a569..d25960e39d 100644
--- a/aksel.nav.no/website/pages/eksempler/primitive-page/below-fold.tsx
+++ b/aksel.nav.no/website/pages/eksempler/primitive-page/below-fold.tsx
@@ -29,7 +29,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -40,5 +40,5 @@ export const Demo = {
 export const args = {
   index: 1,
   title: "Footer belowFold",
-  desc: "Sikrer at footer aldri vil vises før man begynner å scrolle. Dette hjelper med å redusere layout-shifts ved navigering mellom sider.",
+  desc: "`footerPosition=belowFold` sikrer at footer aldri vil vises før man begynner å scrolle. Dette hjelper med å redusere layout-shifts ved navigering mellom sider.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/content-block-padding.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/content-block-padding.tsx
index 063ddc8d22..d889c4cb6c 100644
--- a/aksel.nav.no/website/pages/eksempler/primitive-page/content-block-padding.tsx
+++ b/aksel.nav.no/website/pages/eksempler/primitive-page/content-block-padding.tsx
@@ -29,7 +29,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -40,5 +40,5 @@ export const Demo = {
 export const args = {
   index: 3,
   title: "Content Padding",
-  desc: "contentBlockPadding på Page sikrer at det alltid vil være minimumspadding mellom innhold og footer. Dette vil være en god fallback, men layouts vil ofte trenge ekstra padding top/bottom",
+  desc: "Propen `contentBlockPadding` på Page sikrer at det alltid vil være en minimumspadding mellom innhold og footer. Dette vil være en god fallback, men mange layouts vil trenge ekstra padding top/bottom.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx
index ee6542831e..c629f651e2 100644
--- a/aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx
+++ b/aksel.nav.no/website/pages/eksempler/primitive-page/demo.tsx
@@ -34,7 +34,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -45,5 +45,4 @@ export const Demo = {
 export const args = {
   index: 0,
   title: "Standard",
-  desc: "Page gjør det enklere å bygge opp layout med riktig maksbredde og gutters.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/gutters.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/gutters.tsx
index 7b88ebb80e..262b99f03b 100644
--- a/aksel.nav.no/website/pages/eksempler/primitive-page/gutters.tsx
+++ b/aksel.nav.no/website/pages/eksempler/primitive-page/gutters.tsx
@@ -34,7 +34,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -45,5 +45,5 @@ export const Demo = {
 export const args = {
   index: 2,
   title: "Gutters",
-  desc: "Gutters-prop på Page.Block setter responsive gutters (padding-inline)",
+  desc: "Propen `gutters` på Page.Block setter responsive gutters (padding-inline).",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx b/aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx
index ea4db7588e..9a1d088bc2 100644
--- a/aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx
+++ b/aksel.nav.no/website/pages/eksempler/primitive-page/width.tsx
@@ -4,7 +4,6 @@ import { withDsExample } from "@/web/examples/withDsExample";
 const Example = () => {
   return (
     <Page
-      background="bg-subtle"
       footer={
         <Box as="footer" background="surface-neutral-moderate" padding="8">
           <Page.Block gutters width="2xl">
@@ -24,8 +23,10 @@ const Example = () => {
         padding="8"
         paddingBlock="16"
       >
-        <Page.Block gutters width="2xl">
-          Content
+        <Page.Block gutters width="text">
+          Vi anbefaler å bruke <code>width=&quot;text&quot;</code> på
+          tekstblokker. Dette setter maksbredden til 576px + padding og skal gi
+          en behagelig linjelengde.
         </Page.Block>
       </Box>
     </Page>
@@ -35,7 +36,7 @@ const Example = () => {
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
 export default withDsExample(Example, {
   showBreakpoints: true,
-  variant: "full",
+  variant: "fullscreen",
 });
 
 /* Storybook story */
@@ -46,5 +47,5 @@ export const Demo = {
 export const args = {
   index: 6,
   title: "Maksbredde",
-  desc: "Width-prop på Page.Block sentrerer innhold og legger på maksbredde.",
+  desc: "Propen `width` på Page.Block sentrerer innhold og legger på maksbredde.",
 };

From 0768148cb7eb85b5ced4f35af1025ce416121c64 Mon Sep 17 00:00:00 2001
From: Halvor Haugan <halvor.haugan@nav.no>
Date: Mon, 11 Nov 2024 17:14:15 +0100
Subject: [PATCH 2/4] comment

---
 .../components/website-modules/TextWithMarkdownLink.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx b/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx
index 128a3dfaf9..657d9fd1b1 100644
--- a/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx
+++ b/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx
@@ -3,8 +3,8 @@ import AkselLink from "@/web/AkselLink";
 import InlineCode from "./InlineCode";
 
 /**
- * Splits a string into text and links,
- * and returns an array of React elements.
+ * Takes a string and replaces markdown links with Link components
+ * and backticks with InlineCode components.
  */
 const TextWithMarkdownLink = ({ children: input }: { children: string }) => {
   const regex = /\[([^\]]+)\]\(([^\s)]+)\)|`([^`]+)`/g;

From e6529fbfc664c5da1fca22ae6ad4c688cd17ccfa Mon Sep 17 00:00:00 2001
From: Halvor Haugan <halvor.haugan@nav.no>
Date: Tue, 12 Nov 2024 10:45:58 +0100
Subject: [PATCH 3/4] comment + rename + style->class

---
 .../sanity-modules/code-examples/CodeExamples.tsx          | 7 +++----
 .../sanity-modules/intro-seksjon/IntroSeksjon.tsx          | 6 +++---
 .../{TextWithMarkdownLink.tsx => TextWithMarkdown.tsx}     | 6 +++---
 aksel.nav.no/website/pages/grunnleggende/index.tsx         | 6 +++---
 aksel.nav.no/website/pages/komponenter/index.tsx           | 6 +++---
 aksel.nav.no/website/pages/monster-maler/index.tsx         | 6 +++---
 6 files changed, 18 insertions(+), 19 deletions(-)
 rename aksel.nav.no/website/components/website-modules/{TextWithMarkdownLink.tsx => TextWithMarkdown.tsx} (78%)

diff --git a/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx b/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
index 9cae0a5e22..7a084d9241 100644
--- a/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
+++ b/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
@@ -11,7 +11,7 @@ import { BodyLong, Button, Chips, HStack } from "@navikt/ds-react";
 import SnippetLazy from "@/cms/code-snippet/SnippetLazy";
 import ErrorBoundary from "@/error-boundary";
 import { CodeExamplesT } from "@/types";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { CodeSandbox } from "./parts/CodeSandbox";
 import { Sandbox } from "./parts/Sandbox";
 
@@ -133,7 +133,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
         >
           {fil?.description && (
             <BodyLong className="mb-2">
-              <TextWithMarkdownLink>{fil.description}</TextWithMarkdownLink>
+              <TextWithMarkdown>{fil.description}</TextWithMarkdown>
             </BodyLong>
           )}
 
@@ -156,12 +156,11 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                   aria-label={`${node.dir?.title} ${fil.title} eksempel`}
                   title="Demo"
                   className={cl(
-                    "block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
+                    "block max-h-[calc(100vh-200px)] w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
                     {
                       invisible: unloaded,
                     },
                   )}
-                  style={{ maxHeight: "calc(100vh - 200px)" }}
                 />
                 {unloaded && (
                   <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
diff --git a/aksel.nav.no/website/components/sanity-modules/intro-seksjon/IntroSeksjon.tsx b/aksel.nav.no/website/components/sanity-modules/intro-seksjon/IntroSeksjon.tsx
index 732066ccf4..318a6eff87 100644
--- a/aksel.nav.no/website/components/sanity-modules/intro-seksjon/IntroSeksjon.tsx
+++ b/aksel.nav.no/website/components/sanity-modules/intro-seksjon/IntroSeksjon.tsx
@@ -2,7 +2,7 @@ import ErrorBoundary from "@/error-boundary";
 import { SanityBlockContent } from "@/sanity-block";
 import { AkselGrunnleggendeDocT, AkselKomponentDocT } from "@/types";
 import { List, ListItem } from "@/web/List";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 
 type IntroProps = {
   node: AkselKomponentDocT["intro"] | AkselGrunnleggendeDocT["intro"];
@@ -25,7 +25,7 @@ const Intro = ({ node, internal }: IntroProps) => {
           {internal && <ListItem icon>Bruk på interne flater</ListItem>}
           {node.brukes_til.map((x) => (
             <ListItem icon key={x}>
-              <TextWithMarkdownLink>{x}</TextWithMarkdownLink>
+              <TextWithMarkdown>{x}</TextWithMarkdown>
             </ListItem>
           ))}
         </List>
@@ -33,7 +33,7 @@ const Intro = ({ node, internal }: IntroProps) => {
           <List title="Uegnet til:">
             {node.brukes_ikke_til.map((x) => (
               <ListItem icon key={x}>
-                <TextWithMarkdownLink>{x}</TextWithMarkdownLink>
+                <TextWithMarkdown>{x}</TextWithMarkdown>
               </ListItem>
             ))}
           </List>
diff --git a/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx b/aksel.nav.no/website/components/website-modules/TextWithMarkdown.tsx
similarity index 78%
rename from aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx
rename to aksel.nav.no/website/components/website-modules/TextWithMarkdown.tsx
index 657d9fd1b1..00fe4f2639 100644
--- a/aksel.nav.no/website/components/website-modules/TextWithMarkdownLink.tsx
+++ b/aksel.nav.no/website/components/website-modules/TextWithMarkdown.tsx
@@ -6,8 +6,8 @@ import InlineCode from "./InlineCode";
  * Takes a string and replaces markdown links with Link components
  * and backticks with InlineCode components.
  */
-const TextWithMarkdownLink = ({ children: input }: { children: string }) => {
-  const regex = /\[([^\]]+)\]\(([^\s)]+)\)|`([^`]+)`/g;
+const TextWithMarkdown = ({ children: input }: { children: string }) => {
+  const regex = /\[([^\]]+)\]\(([^\s)]+)\)|`([^`]+)`/g; // The part before the pipe finds links, the part after finds backticks.
   let lastIndex = 0;
   const elements: React.ReactNode[] = [];
 
@@ -37,4 +37,4 @@ const TextWithMarkdownLink = ({ children: input }: { children: string }) => {
   return <>{elements}</>;
 };
 
-export { TextWithMarkdownLink };
+export { TextWithMarkdown };
diff --git a/aksel.nav.no/website/pages/grunnleggende/index.tsx b/aksel.nav.no/website/pages/grunnleggende/index.tsx
index 2ddbe4d136..a838f095b8 100644
--- a/aksel.nav.no/website/pages/grunnleggende/index.tsx
+++ b/aksel.nav.no/website/pages/grunnleggende/index.tsx
@@ -15,7 +15,7 @@ import {
   SidebarT,
 } from "@/types";
 import { generateSidebar } from "@/utils";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { grunnleggendeKategorier } from "../../sanity/config";
@@ -98,9 +98,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
               <div>
                 {page?.[`ingress_${kat.value}`] && (
                   <BodyLong size="large" className="mb-4 only:mb-7">
-                    <TextWithMarkdownLink>
+                    <TextWithMarkdown>
                       {page[`ingress_${kat.value}`]}
-                    </TextWithMarkdownLink>
+                    </TextWithMarkdown>
                   </BodyLong>
                 )}
                 {page?.[`intro_${kat.value}`] && (
diff --git a/aksel.nav.no/website/pages/komponenter/index.tsx b/aksel.nav.no/website/pages/komponenter/index.tsx
index bb62611aae..f8fb5062f3 100644
--- a/aksel.nav.no/website/pages/komponenter/index.tsx
+++ b/aksel.nav.no/website/pages/komponenter/index.tsx
@@ -25,7 +25,7 @@ import {
 } from "@/types";
 import { generateSidebar } from "@/utils";
 import { IntroCards } from "@/web/IntroCards";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { komponentKategorier } from "../../sanity/config";
@@ -134,9 +134,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
               <div>
                 {page?.[`ingress_${kat.value}`] && (
                   <BodyLong size="large" className="mb-4 only:mb-7">
-                    <TextWithMarkdownLink>
+                    <TextWithMarkdown>
                       {page[`ingress_${kat.value}`]}
-                    </TextWithMarkdownLink>
+                    </TextWithMarkdown>
                   </BodyLong>
                 )}
                 {page?.[`intro_${kat.value}`] && (
diff --git a/aksel.nav.no/website/pages/monster-maler/index.tsx b/aksel.nav.no/website/pages/monster-maler/index.tsx
index 8230a698be..7b1f221382 100644
--- a/aksel.nav.no/website/pages/monster-maler/index.tsx
+++ b/aksel.nav.no/website/pages/monster-maler/index.tsx
@@ -15,7 +15,7 @@ import {
   SidebarT,
 } from "@/types";
 import { generateSidebar } from "@/utils";
-import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
+import { TextWithMarkdown } from "@/web/TextWithMarkdown";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { templatesKategorier } from "../../sanity/config";
@@ -98,9 +98,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
               <div>
                 {page?.[`ingress_${kat.value}`] && (
                   <BodyLong size="large" className="mb-4 only:mb-7">
-                    <TextWithMarkdownLink>
+                    <TextWithMarkdown>
                       {page[`ingress_${kat.value}`]}
-                    </TextWithMarkdownLink>
+                    </TextWithMarkdown>
                   </BodyLong>
                 )}
                 {page?.[`intro_${kat.value}`] && (

From 14cb490cbc1f848dd1ebd3d1a668a7c0707c62c2 Mon Sep 17 00:00:00 2001
From: Halvor Haugan <halvor.haugan@nav.no>
Date: Tue, 12 Nov 2024 12:33:39 +0100
Subject: [PATCH 4/4] fix

---
 .../components/sanity-modules/code-examples/CodeExamples.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx b/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
index 1421fe1941..da62ebf4bb 100644
--- a/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
+++ b/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
@@ -152,7 +152,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                 <div
                   ref={resizerRef} // Resize directly on iframe doesn't work in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=680823)
                   className={cl(
-                    "block max-h-[calc(100vh-200px)] w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
+                    "max-w-4xl resize-x overflow-hidden shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
                     { invisible: unloaded },
                   )}
                 >