From d69677db7ea7dafc3bc20a1af6c9b0938848200c Mon Sep 17 00:00:00 2001
From: Stephen Gordon <n00202054@iadt.ie>
Date: Sun, 31 Mar 2024 18:49:37 +0100
Subject: [PATCH] trying to fix layout

---
 src/app/@auth/layout.tsx                        | 2 +-
 src/app/components/ui/VaulDrawer.tsx            | 3 ++-
 src/app/components/ui/hover-border-gradient.tsx | 2 +-
 src/app/home/page.tsx                           | 2 +-
 src/app/layout.tsx                              | 7 +++++--
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/app/@auth/layout.tsx b/src/app/@auth/layout.tsx
index 125b457..cfb70ad 100644
--- a/src/app/@auth/layout.tsx
+++ b/src/app/@auth/layout.tsx
@@ -14,7 +14,7 @@ export default function ComponentsLayout({
     <>
       <AuthPage>
         {/* <SheetLayout>{children}</SheetLayout> */}
-        <VaulDrawer>
+        <VaulDrawer >
           <div className='overflow-y-scroll'>{children}</div>
         </VaulDrawer>
       </AuthPage>
diff --git a/src/app/components/ui/VaulDrawer.tsx b/src/app/components/ui/VaulDrawer.tsx
index a571dbb..03cc17f 100644
--- a/src/app/components/ui/VaulDrawer.tsx
+++ b/src/app/components/ui/VaulDrawer.tsx
@@ -12,6 +12,7 @@ export function VaulDrawer({children}) {
 
   return (
     <Drawer.Root
+    
       onClose={() => {
         dispatch(setSheet(false));
         window.history.pushState({}, '', '/home');
@@ -21,7 +22,7 @@ export function VaulDrawer({children}) {
     >
       <Drawer.Portal>
         <Drawer.Overlay className='bg-background/40 fixed inset-0' />
-        <Drawer.Content className='from-background to bg-background/80 fixed bottom-0 left-0 right-0 mt-24 flex h-[96%] flex-col rounded-t-[10px] bg-gradient-to-t backdrop-blur-2xl'>
+        <Drawer.Content className='z-50 from-background to bg-background/80 fixed bottom-0 left-0 right-0 mt-24 flex h-[96%] flex-col rounded-t-[10px] bg-gradient-to-t backdrop-blur-2xl'>
           {children}
         </Drawer.Content>
       </Drawer.Portal>
diff --git a/src/app/components/ui/hover-border-gradient.tsx b/src/app/components/ui/hover-border-gradient.tsx
index aab2d9b..6d4cfc1 100644
--- a/src/app/components/ui/hover-border-gradient.tsx
+++ b/src/app/components/ui/hover-border-gradient.tsx
@@ -64,7 +64,7 @@ export function HoverBorderGradient({
       }} */
       /* onMouseLeave={() => setHovered(false)} */
       className={cn(
-        `relative flex h-min w-full flex-col flex-nowrap content-center items-center justify-center gap-10 overflow-visible rounded-xl border  bg-black/${
+        `relative flex h-min w-full flex-col flex-nowrap content-center items-center justify-center gap-10 overflow-visible rounded-xl border bg-black/${
           hovered ? 10 : 0
         } decoration-clone p-px transition duration-500 dark:bg-white/20`,
         containerClassName
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index dc28333..2c2aba6 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -117,7 +117,7 @@ export default function Page() {
   console.log('usdcBalance', usdcBalance);
   return (
     <AuthPage>
-      <main className='relative bg-background grid justify-center overflow-y-auto'>
+      <main className='relative bg-background  overflow-y-auto h-full'>
        
         <div>
          {/*  <div className='absolute -z-50 '>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f51b21d..f8006cd 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -181,13 +181,16 @@ export default function RootLayout({
                   <WagmiProvider config={config!}>
                     <QueryClientProvider client={queryClient}>
                       <LayoutGroup>
-                        <div vaul-drawer-wrapper='' className='h-[100vh] overflow-y-scroll relative'>
+                        <div
+                          vaul-drawer-wrapper=''
+                          className='relative h-[100vh] justify-center overflow-hidden'
+                        >
                           {auth}
                           {drawer}
 
                           {children}
-                           <BottomNavbar /> 
                         </div>
+                        <BottomNavbar />
                       </LayoutGroup>
                     </QueryClientProvider>
                   </WagmiProvider>