fix: responsive builder

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": {

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">

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`}

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"

src/components/MenuBuilder/MenuPreview/MenuPreview.tsx

@@ -10,13 +10,16 @@ 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',
   import.meta.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>