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 && (
-                <CardHeader icon={icon} content={name} isActive={active} />
-            )}
+            {header ? (
+                <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 = {
-    container: style.container,
-    active: style.active,
-};
-
-const cx = classNames.bind(styles);
-
-export default function CardHeader({ icon, content, isActive = false }) {
+export default function CardHeader({ icon, content, active = 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,6 +42,7 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
+            <div className={style.body}>
                 <CardColumn>
                     <Card icon="🚊" name="Timetable">
                         <Timetable />
@@ -65,6 +66,7 @@ export default function Dashboard() {
                         <Flatastic />
                     </Card>
                 </CardColumn>
+            </div>
 
             <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;