feat: grid layout on pay (#252)

https://github.com/peeldao/juicecrowd/assets/12551741/48cfa677-6fc0-4130-9de1-09faa7b3f0d3

| scenario | img |
| --- | --- |
| nfts overflowing | <img width="800" alt="Screenshot 2023-11-24 at 5 33
41 PM"
src="https://github.com/peeldao/juicecrowd/assets/12551741/05d06d4b-f1d2-4318-9faa-5e322e244e83">
|
| nfts within fold | <img width="800" alt="Screenshot 2023-11-24 at 5 33
33 PM"
src="https://github.com/peeldao/juicecrowd/assets/12551741/8393e1b0-6e3f-4733-8aae-018fe9053cdb">
|
| mobile | ![localhost_3000_p_593_pay(iPhone 12
Pro)](https://github.com/peeldao/juicecrowd/assets/12551741/59d73498-1fe1-4d60-9ba2-e1c45348b362)
|

src/components/Project/ProjectPayPage.tsx

@@ -59,9 +59,9 @@ export const ProjectPayPage = () => {
   return (
     <ProjectPayContext.Provider value={{ ...state, dispatch }}>
       <FormProvider {...form}>
-        <div className="block md:flex">
+        <div className="block min-h-screen grid-cols-2 md:grid">
           {/* Left panel */}
-          <div className="flex-1 px-4 pb-14 pt-32 md:px-8 md:pt-10">
+          <div className="px-4 pb-14 pt-32 md:px-8 md:pt-10">
             <div className="md:mx-auto md:max-w-lg">
               <BackButton className="hidden md:flex" />
               <div className="md:mt-12">
@@ -89,7 +89,7 @@ export const ProjectPayPage = () => {
           </div>
 
           {/* Right panel */}
-          <div className="flex-1 bg-gray-50 px-4 pb-24 pt-12 md:px-8 md:pt-36">
+          <div className="h-full bg-gray-50 px-4 pb-24 pt-12 md:px-8 md:pt-36">
             <ProjectPayForm className="md:max-w-lg" />
           </div>
         </div>