updates to dependencies, merging to production

src/components/builder/center/Artboard.js

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from '../../../contexts/ResumeContext';
@@ -13,14 +13,9 @@ 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>
@@ -30,14 +25,7 @@ const Artboard = () => {
         <link rel="canonical" href={`https://rxresu.me/app/builder/${id}`} />
       </Helmet>
 
-      <div
-        id="page"
-        className={styles.container}
-        style={{
-          transform: `scale(${width / 1680})`,
-          transformOrigin: `${width / 1680 > 1.0 ? `top left` : ``}`,
-        }}
-      >
+      <div id="page" className={styles.container}>
         {template === 'onyx' && <Onyx data={state} />}
         {template === 'pikachu' && <Pikachu data={state} />}
         {template === 'gengar' && <Gengar data={state} />}

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

@@ -1,10 +1,11 @@
 @media screen {
   .container {
     width: 210mm;
-    min-height: 297mm;
+    height: 297mm;
     overflow: scroll;
+    margin: 2rem auto;
     box-shadow: var(--shadow);
 
-    @apply my-16 bg-white rounded;
+    @apply bg-white rounded;
   }
 }