chore(storefront): Fix smaller MDX styling issues (#1926)

digdir · May 3, 2024 · 9294da4 · 9294da4
1 parent 0dce5ef
commit 9294da4
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/apps/storefront/components/Image/Image.module.css b/apps/storefront/components/Image/Image.module.css
@@ -1,6 +1,6 @@
 .container {
   display: flex;
-  max-width: 800px;
+  max-width: var(--media-max-width);
   margin: var(--fds-spacing-7) 0;
   border-radius: var(--fds-border_radius-medium);
   flex-wrap: wrap;

diff --git a/apps/storefront/components/MdxContent/MdxContent.module.css b/apps/storefront/components/MdxContent/MdxContent.module.css
@@ -5,7 +5,9 @@
 .content > p,
 .content > h2,
 .content > h3,
-.content > h4 {
+.content > h4,
+.content > ul,
+.content > ol {
   max-width: 740px;
 }
 
@@ -154,7 +156,9 @@
   font-weight: 600;
 }
 
-.content p code {
+.content p code,
+.content ul code,
+.content ol code {
   padding: 0.2em 0.5em;
   margin: 1px;
   font-size: 0.9em;

diff --git a/apps/storefront/components/ResponsiveIframe/ResponsiveIframe.module.css b/apps/storefront/components/ResponsiveIframe/ResponsiveIframe.module.css
@@ -2,6 +2,7 @@
   position: relative;
   overflow: hidden;
   width: 100%;
+  max-width: var(--media-max-width);
   padding-top: 56.25%;
   box-shadow: var(--fds-shadow-medium);
   border-radius: 4px;

diff --git a/apps/storefront/globals.css b/apps/storefront/globals.css
@@ -13,6 +13,7 @@
   --grid-gap: var(--fds-spacing-8);
   --page-spacing-top: var(--fds-spacing-14);
   --page-spacing-bottom: var(--fds-spacing-14);
+  --media-max-width: 800px;
 }
 
 body {