adding box-sizing: border-box to fix spacing bug with columns

code0-tech · Apr 30, 2024 · 68c6519 · 68c6519
1 parent 570d6cd
commit 68c6519
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/components/container/Container.stories.tsx b/src/components/container/Container.stories.tsx
@@ -62,7 +62,7 @@ export const ContainerWithNews = () => {
 }
 
 export const ContainerRowCol = () => {
-    return <div style={{background: "#ffffff1a", padding: "1rem 0"}}>
+    return <div style={{background: "#ffffff1a"}}>
         <Container>
             <Row>
                 <Col xs={12} lg={4}>
@@ -77,17 +77,19 @@ export const ContainerRowCol = () => {
                 </Col>
                 <Col xs={12} lg={4}>
                     <Card gradient variant={"outlined"} color={"info"}>
-                        <Text size={"md"}>Heading 2</Text>
+                        <Text size={"md"}>Heading 3</Text>
                     </Card>
                 </Col>
+            </Row>
+            <Row>
                 <Col>
                     <Card gradient variant={"outlined"} color={"info"}>
-                        <Text size={"md"}>Heading 2</Text>
+                        <Text size={"md"}>Heading 4</Text>
                     </Card>
                 </Col>
                 <Col>
                     <Card gradient variant={"outlined"} color={"info"}>
-                        <Text size={"md"}>Heading 2</Text>
+                        <Text size={"md"}>Heading 5</Text>
                     </Card>
                 </Col>
             </Row>

diff --git a/src/components/row/Row.style.scss b/src/components/row/Row.style.scss
@@ -11,6 +11,9 @@
   > * {
     flex-shrink: 0;
     max-width: 100%;
-    padding: 0 .5rem;
+    width: 100%;
+    padding-left: .5rem;
+    padding-right: .5rem;
+    box-sizing: border-box;
   }
 }