fixed overflow issue

Stephen-Gordon · Mar 18, 2024 · 43fda1f · 43fda1f
1 parent f755e61
commit 43fda1f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/src/app/components/BottomNav/BottomNav.tsx b/src/app/components/BottomNav/BottomNav.tsx
@@ -11,7 +11,10 @@ const BottomNavbar = () => {
   const dispatch = useDispatch();
 
   return (
-    <nav className='bg-background/50 sticky bottom-0 left-0 flex w-full justify-between bg-opacity-10 bg-clip-padding p-4 px-8 saturate-200 backdrop-blur-xl backdrop-filter'>
+    <nav
+      style={{ zIndex: 2000 }}
+      className='bg-background/50 fixed bottom-0 flex w-full justify-between overflow-hidden bg-opacity-10 bg-clip-padding p-4 px-8 saturate-200 backdrop-blur-xl backdrop-filter'
+    >
       <Link href='/home'>
         <Home
           onClick={() => {

diff --git a/src/app/components/activity/Activity.tsx b/src/app/components/activity/Activity.tsx
@@ -58,7 +58,7 @@ export default function Activity() {
         <motion.div
           layoutId='activity'
           transition={{ duration: 0.4 }}
-          className='bg-muted absolute w-full rounded-full text-xl '
+          className='bg-muted w-full rounded-full text-xl '
         >
           <Card className=''>
             <CardHeader>
@@ -67,7 +67,7 @@ export default function Activity() {
               </motion.div>
             </CardHeader>
             <CardContent className=''>
-             <div className='mt-4 space-y-8'>
+              <div className='mt-4 space-y-8'>
                 {transactions &&
                   transactions.map((transaction: any, i: any) => (
                     <motion.div
@@ -78,7 +78,7 @@ export default function Activity() {
                       <RecentTransaction transaction={transaction} />
                     </motion.div>
                   ))}
-              </div> 
+              </div>
             </CardContent>
             <CardFooter className='justify-center space-x-2'>
               <Link

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -139,11 +139,7 @@ export default function RootLayout({
                 <PersistGate loading={null} persistor={persistor}>
                   <WagmiProvider config={config!}>
                     <QueryClientProvider client={queryClient}>
-                      <AnimatePresence
-                        mode='wait'
-                        initial={false}
-                        onExitComplete={() => window.scrollTo(0, 0)}
-                      >
+                      <AnimatePresence mode='wait' initial={false}>
                         <LayoutGroup>
                           <div>{auth}</div>
                           <div>{drawer}</div>
@@ -166,8 +162,10 @@ export default function RootLayout({
                             className='min-h-[100vh] text-gray-300'
                           >
                             {children}
-                            <BottomNavbar />
                           </main>
+                          <div className='w-full overflow-hidden'>
+                            <BottomNavbar />
+                          </div>
                         </LayoutGroup>
                       </AnimatePresence>
                     </QueryClientProvider>