Fix header and make content scroll on overflow

src/components/Card/Card.tsx

@@ -17,9 +17,9 @@ export default function Card({
 }) {
     return (
         <div className={style.card}>
-            {header && (
+            {header ? (
-                <CardHeader icon={icon} content={name} isActive={active} />
+                <CardHeader icon={icon} content={name} active={active} />
-            )}
+            ) : null}
             <div className={style.cardContent}>{children}</div>
         </div>
     );

src/components/CardContainers/style.module.css

@@ -5,7 +5,6 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: 30px;
-    margin: 30px;
 }
 
 .cardRow {

src/components/CardHeader/CardHeader.tsx

@@ -1,17 +1,14 @@
-import classNames from "classnames/bind";
+import classNames from "classnames";
 
 import style from "./style.module.css";
 
-const styles = {
+export default function CardHeader({ icon, content, active = false }) {
-    container: style.container,
-    active: style.active,
-};
-
-const cx = classNames.bind(styles);
-
-export default function CardHeader({ icon, content, isActive = false }) {
     return (
-        <div className={cx("container", { active: isActive })}>
+        <div
+            className={classNames(style.container, {
+                [`${style.active}`]: active,
+            })}
+        >
             <div className={style.title}>
                 <div className={style.icon}>{icon}</div>
                 <div className={style.content}>{content}</div>

src/components/Dashboard/Dashboard.tsx

@@ -42,29 +42,31 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
-            <CardColumn>
+            <div className={style.body}>
-                <Card icon="🚊" name="Timetable">
+                <CardColumn>
-                    <Timetable />
+                    <Card icon="🚊" name="Timetable">
-                </Card>
+                        <Timetable />
-
-                <CardRow>
-                    <Card icon="🕐" name="Clock">
-                        <Datetime />
                     </Card>
 
-                    <Card icon="🌤" name="Weather">
+                    <CardRow>
-                        <Weather />
+                        <Card icon="🕐" name="Clock">
+                            <Datetime />
+                        </Card>
+
+                        <Card icon="🌤" name="Weather">
+                            <Weather />
+                        </Card>
+                    </CardRow>
+
+                    <Card icon="🔔" name="Terminal" active={true}>
+                        <Terminal />
                     </Card>
-                </CardRow>
 
-                <Card icon="🔔" name="Terminal" active={true}>
+                    <Card icon="🧹" name="Flatastic">
-                    <Terminal />
+                        <Flatastic />
-                </Card>
+                    </Card>
-
+                </CardColumn>
-                <Card icon="🧹" name="Flatastic">
+            </div>
-                    <Flatastic />
-                </Card>
-            </CardColumn>
 
             <Footer />
         </div>

src/components/Dashboard/style.module.css

@@ -5,6 +5,12 @@
     transition: 0.5s;
 }
 
+.body {
+    height: 100%;
+    margin: 30px;
+    overflow: scroll;
+}
+
 /* 7 to 16  */
 .day {
     background-color: #007c7d;