fix(Card): fix overflow/scroll issue on small screen widths (#3341)

dnbexperience · Feb 27, 2024 · a0d4a10 · a0d4a10
1 parent 9759275
commit a0d4a10
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 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
@@ -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
@@ -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);
     }
   }