- update layout to work for responsive screen sizes

src/components/builder/center/Artboard.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from '../../../contexts/ResumeContext';
@@ -13,9 +13,14 @@ import styles from './Artboard.module.css';
 const Artboard = () => {
   const state = useSelector();
   const { t } = useTranslation();
+  const [width, setWidth] = useState(0);
   const { id, name, metadata } = state;
   const { template } = metadata;
 
+  useEffect(() => {
+    setWidth(typeof window !== `undefined` && window && window.innerWidth);
+  }, [typeof window !== `undefined` && window && window.innerWidth]);
+
   return (
     <>
       <Helmet>
@@ -25,7 +30,12 @@ const Artboard = () => {
         <link rel="canonical" href={`https://rxresu.me/app/builder/${id}`} />
       </Helmet>
 
-      <div className={styles.container}>
+      <div
+        className={styles.container}
+        style={{
+          transform: `scale(${width / 1680})`,
+        }}
+      >
         {template === 'onyx' && <Onyx data={state} />}
         {template === 'pikachu' && <Pikachu data={state} />}
         {template === 'gengar' && <Gengar data={state} />}

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

@@ -1,22 +1,9 @@
 @media screen {
   .container {
-    width: 210mm;
-    height: 297mm;
-    zoom: 0.5;
+    width: 794px;
+    min-height: 1122px;
     overflow: scroll;
     box-shadow: var(--shadow);
     @apply my-16 bg-white 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,6 +1,5 @@
 .container {
   z-index: 10;
-  box-shadow: var(--left-shadow);
   @apply w-full h-screen overflow-scroll p-8;
   @apply grid gap-8;
 }

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

@@ -1,6 +1,5 @@
 .container {
   z-index: 10;
-  box-shadow: var(--right-shadow);
   @apply w-full h-screen overflow-scroll p-8;
   @apply grid gap-8;
 }

src/pages/app/builder.module.css

@@ -1,33 +1,19 @@
 .container {
-  @apply w-screen h-screen grid grid-cols-10;
+  @apply relative h-screen w-screen overflow-hidden flex items-start justify-center;
 }
 
 .left {
-  @apply col-span-3;
+  width: calc(100vw / 4);
+  box-shadow: var(--left-shadow);
+  @apply bg-primary-50 absolute top-0 bottom-0 left-0 z-10;
 }
 
 .center {
-  @apply col-span-4 h-screen overflow-scroll bg-primary-100 grid justify-center items-center;
+  @apply relative z-0 h-screen overflow-scroll;
 }
 
 .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;
-  }
+  width: calc(100vw / 4);
+  box-shadow: var(--right-shadow);
+  @apply bg-primary-50 absolute top-0 bottom-0 right-0 z-10;
 }