- attempt at responsiveness fix

- bring back scrollbars
- update dependencies

src/components/builder/center/Artboard.module.css

@@ -2,11 +2,21 @@
   .container {
     width: 210mm;
     height: 297mm;
-    zoom: 0.8;
-    -moz-transform: scale(0.8);
-    transform-origin: 50% 18%;
-    overflow-y: scroll;
+    zoom: 0.5;
+    overflow: scroll;
     box-shadow: var(--shadow);
-    @apply bg-white rounded;
+    @apply my-16 rounded;
+  }
+}
+
+@media screen and (min-width: 1366px) {
+  .container {
+    zoom: 0.65;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .container {
+    zoom: 0.8;
   }
 }

src/components/builder/left/LeftSidebar.module.css

@@ -1,12 +1,6 @@
 .container {
   z-index: 10;
   box-shadow: var(--left-shadow);
-  -ms-overflow-style: none;
-  scrollbar-width: none;
   @apply w-full h-screen overflow-scroll p-8;
   @apply grid gap-8;
-}
-
-.container::-webkit-scrollbar {
-  display: none;
-}
+}

src/components/builder/right/RightSidebar.module.css

@@ -1,12 +1,7 @@
 .container {
   z-index: 10;
   box-shadow: var(--right-shadow);
-  -ms-overflow-style: none;
-  scrollbar-width: none;
   @apply w-full h-screen overflow-scroll p-8;
   @apply grid gap-8;
 }
 
-.container::-webkit-scrollbar {
-  display: none;
-}

src/components/builder/right/sections/Templates.js

@@ -89,7 +89,7 @@ const Templates = ({ name }) => {
               alt={x.name}
               loading="eager"
               className="w-full"
-              style={{ height: '225px' }}
+              style={{ height: '230px' }}
               fluid={previews[x.id].childImageSharp.fluid}
             />
             <span>{x.name}</span>