From a0d4a101f3508a06d1badd7178be5aad57032fc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Tue, 27 Feb 2024 23:06:50 +0100
Subject: [PATCH] fix(Card): fix overflow/scroll issue on small screen widths
 (#3341)

---
 .../components/card/stories/Card.stories.tsx  | 33 ++++++++++++++++++-
 .../src/components/card/style/dnb-card.scss   | 14 ++++++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx b/packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx
index a31332ba75f..ef2ae33b361 100644
--- a/packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx
+++ b/packages/dnb-eufemia/src/components/card/stories/Card.stories.tsx
@@ -6,8 +6,9 @@
 import React from 'react'
 
 import { Field, Form } from '../../../extensions/forms'
-import { Card, Flex } from '../../'
+import { Card, Flex, Grid } from '../../'
 import { Wrapper, Box } from 'storybook-utils/helpers'
+import { H2, P } from '../../../elements'
 
 export default {
   title: 'Eufemia/Components/Card',
@@ -159,3 +160,33 @@ export function CardWithHeading() {
     </Card>
   )
 }
+
+export const WithGrid = () => {
+  return (
+    <div style={{}}>
+      <Grid.Container
+        columns={{
+          small: 1,
+          medium: 3,
+          large: 3,
+        }}
+        columnGap="small"
+      >
+        <Card stack>
+          <H2>Heading</H2>
+          <P>Text</P>
+        </Card>
+        <Card stack>
+          <H2>Heading</H2>
+          <P>
+            Pariatur officia sit adipisicing pariatur commodo enim do quis
+          </P>
+        </Card>
+        <Card stack>
+          <H2>Heading</H2>
+          <P>Text</P>
+        </Card>
+      </Grid.Container>
+    </div>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/card/style/dnb-card.scss b/packages/dnb-eufemia/src/components/card/style/dnb-card.scss
index 8717ca3c7a8..72efa444b47 100644
--- a/packages/dnb-eufemia/src/components/card/style/dnb-card.scss
+++ b/packages/dnb-eufemia/src/components/card/style/dnb-card.scss
@@ -16,8 +16,18 @@
 
   @include allBelow(small) {
     &.dnb-section::before {
-      left: -100vw;
-      right: -100vw;
+      left: var(--left);
+
+      --outline: 99vw 0 0 0 var(--background-color),
+        198vw 0 0 0 var(--background-color),
+        297vw 0 0 0 var(--background-color),
+        396vw 0 0 0 var(--background-color),
+        0 var(--outline-width) 0 0 var(--outline-color),
+        99vw var(--outline-width) 0 0 var(--outline-color),
+        0 calc(var(--outline-width) * -1) 0 0 var(--outline-color),
+        99vw calc(var(--outline-width) * -1) 0 0 var(--outline-color),
+        198vw var(--outline-width) 0 0 var(--outline-color),
+        198vw calc(var(--outline-width) * -1) 0 0 var(--outline-color);
     }
   }