- attempt at responsiveness fix

- bring back scrollbars
- update dependencies

src/pages/app/builder.js

@@ -9,6 +9,7 @@ import LoadingScreen from '../../components/router/LoadingScreen';
 import DatabaseContext from '../../contexts/DatabaseContext';
 import { useDispatch } from '../../contexts/ResumeContext';
 import Button from '../../components/shared/Button';
+import styles from './builder.module.css';
 
 const Builder = ({ id }) => {
   const dispatch = useDispatch();
@@ -53,14 +54,14 @@ const Builder = ({ id }) => {
     }
 
     return (
-      <div className="h-screen grid grid-cols-11">
-        <div className="col-span-3">
+      <div className={styles.container}>
+        <div className={styles.left}>
           <LeftSidebar />
         </div>
-        <div className="col-span-5 h-screen overflow-hidden bg-primary-100 grid items-center justify-center">
+        <div className={styles.center}>
           <Artboard />
         </div>
-        <div className="col-span-3">
+        <div className={styles.right}>
           <RightSidebar />
         </div>
       </div>

src/pages/app/builder.module.css

@@ -0,0 +1,33 @@
+.container {
+  @apply w-screen h-screen grid grid-cols-10;
+}
+
+.left {
+  @apply col-span-3;
+}
+
+.center {
+  @apply col-span-4 h-screen overflow-scroll bg-primary-100 grid justify-center items-center;
+}
+
+.right {
+  @apply col-span-3;
+}
+
+@media screen and (min-width: 1440px) {
+  .container {
+    @apply grid-cols-11;
+  }
+  
+  .left {
+    @apply col-span-3;
+  }
+  
+  .center {
+    @apply col-span-5;
+  }
+  
+  .right {
+    @apply col-span-3;
+  }
+}

src/pages/app/dashboard.js

@@ -74,8 +74,8 @@ const Dashboard = ({ user }) => {
 
       <TopNavbar />
 
-      <div className="container mt-12">
-        <div className="grid grid-cols-6 gap-8">
+      <div className="container mt-12 px-12 xl:px-0">
+        <div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-8">
           <CreateResume />
 
           {resumes.map((x) => (