From c795911b7beb817592345dcc1373291c38104a69 Mon Sep 17 00:00:00 2001
From: Guido Pereira <stereopt@gmail.com>
Date: Fri, 2 Aug 2024 23:19:42 +0100
Subject: [PATCH] fix: responsive builder

---
 package-lock.json                             | 20 +++++++++++++++++++
 package.json                                  |  1 +
 src/components/MenuBuilder/MenuBuilder.tsx    |  6 +++---
 .../MenuItems/MenuItem/MenuItem.tsx           |  2 +-
 .../MenuItems/MenuItem/MenuItemOptions.tsx    |  2 +-
 .../MenuBuilder/MenuPreview/MenuPreview.tsx   |  5 ++++-
 6 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fd9123f..e911c17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "react-pdf": "^9.1.0",
         "react-toastify": "^10.0.5",
         "tailwind-merge": "^2.3.0",
+        "usehooks-ts": "^3.1.0",
         "yup": "^1.4.0"
       },
       "devDependencies": {
@@ -3797,6 +3798,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5891,6 +5897,20 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
+      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index e0cf66f..aea9779 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react-pdf": "^9.1.0",
     "react-toastify": "^10.0.5",
     "tailwind-merge": "^2.3.0",
+    "usehooks-ts": "^3.1.0",
     "yup": "^1.4.0"
   },
   "devDependencies": {
diff --git a/src/components/MenuBuilder/MenuBuilder.tsx b/src/components/MenuBuilder/MenuBuilder.tsx
index 9c1d70f..a0e11e2 100644
--- a/src/components/MenuBuilder/MenuBuilder.tsx
+++ b/src/components/MenuBuilder/MenuBuilder.tsx
@@ -50,10 +50,10 @@ const MenuBuilder = () => {
   return (
     <>
       <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(onFormSubmit)}>
+        <form className="px-8 py-8 mt-16" onSubmit={handleSubmit(onFormSubmit)}>
           <Navbar />
-          <main className="flex flex-col items-center gap-16 p-8 mt-16">
-            <div className="flex flex-col gap-4 w-[600px]">
+          <main className="flex flex-col items-center gap-16">
+            <div className="flex flex-col gap-4 w-[350px] sm:w-[600px]">
               <div>
                 <h2 className="card-title">Create Menu</h2>
                 <p className="mb-4">
diff --git a/src/components/MenuBuilder/MenuItems/MenuItem/MenuItem.tsx b/src/components/MenuBuilder/MenuItems/MenuItem/MenuItem.tsx
index 96547c0..e35ee76 100644
--- a/src/components/MenuBuilder/MenuItems/MenuItem/MenuItem.tsx
+++ b/src/components/MenuBuilder/MenuItems/MenuItem/MenuItem.tsx
@@ -61,7 +61,7 @@ const MenuItem = ({
             className="flex flex-col gap-2 w-full p-3 bg-neutral-100 rounded-xl"
             ref={refs.setReference}
             {...getReferenceProps()}>
-            <div className="flex justify-between gap-2">
+            <div className="flex flex-col lg:flex-row justify-between gap-2">
               <div className="flex flex-col gap-2 basis-2/3">
                 <FormInput
                   name={`${category}.items.${itemIndex}.name`}
diff --git a/src/components/MenuBuilder/MenuItems/MenuItem/MenuItemOptions.tsx b/src/components/MenuBuilder/MenuItems/MenuItem/MenuItemOptions.tsx
index 87ead86..a581234 100644
--- a/src/components/MenuBuilder/MenuItems/MenuItem/MenuItemOptions.tsx
+++ b/src/components/MenuBuilder/MenuItems/MenuItem/MenuItemOptions.tsx
@@ -18,7 +18,7 @@ const MenuItemOptions = ({
   dragHandleProps,
 }: MenuItemOptionProps) => {
   return (
-    <div className="p-2 flex flex-row gap-1 rounded">
+    <div className="p-2 flex flex-col lg:flex-row gap-1 rounded">
       <Button
         type="button"
         size="xs"
diff --git a/src/components/MenuBuilder/MenuPreview/MenuPreview.tsx b/src/components/MenuBuilder/MenuPreview/MenuPreview.tsx
index 0179553..2522ee4 100644
--- a/src/components/MenuBuilder/MenuPreview/MenuPreview.tsx
+++ b/src/components/MenuBuilder/MenuPreview/MenuPreview.tsx
@@ -10,6 +10,7 @@ import { FiAlertCircle, FiChevronLeft } from 'react-icons/fi';
 import { usePDF } from '@react-pdf/renderer';
 import MenuPDF from '@/components/MenuPDF/MenuPDF';
 import { cn } from '@/utils/cn';
+import { useWindowSize } from 'usehooks-ts';
 
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -17,6 +18,8 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
 ).toString();
 
 const MenuPreview = () => {
+  const { width = 0 } = useWindowSize();
+
   const setShowPreview = useSetAtom(previewAtom);
   const [instance] = usePDF({ document: MenuPDF() });
 
@@ -61,7 +64,7 @@ const MenuPreview = () => {
                 Something went Wrong!
               </Alert>
             }>
-            <Page pageNumber={1} height={720} />
+            <Page pageNumber={1} width={width - 50 > 520 ? 520 : width - 50} />
           </Document>
         </div>
       </div>