fix: layouts and scrolls

src/components/menu/SideMenu.tsx

@@ -75,13 +75,13 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
     const menuStateMemo = useMemo(() => menuState, [menuState]);
 
     return (
-        <div className='w-full h-dvh'>
+        <div className='w-full'>
             <BlurredOverlayContainer bgOpacity={40} visible={menuStateMemo} onClick={toggleMenuState} outDelay={150}>
                 <div
                     data-isvisible={menuStateMemo}
                     onClick={(e) => { e.stopPropagation(); }}
                     className={`fixed top-0 bottom-0 -right-full data-[isvisible=true]:right-0 transition-all duration-100 ease-in-out not-xl:!rounded-s-none overflow-clip bg-white w-[200px] h-dvh flex flex-col z-40`}>
-                    <ul className="overflow-hidden noscrollbar pt-20 pb-10 flex flex-col justify-between h-full ">
+                    <ul className="overflow-y-scroll noscrollbar pt-20 pb-10 flex flex-col justify-between h-full ">
                         <li>
                             <div className='flex flex-col gap-[60px]'>
                                 <div className='flex flex-col gap-[23px]'>

src/components/overlays/BlurredOverlayContainer.tsx

@@ -41,6 +41,8 @@ const BlurredOverlayContainer = ({
   const variants: Variants = {
     hidden: {
       opacity: 0,
+      visibility: 'hidden',
+      display: 'none',
       transition: {
         delay: transitionDelay / 1000,
         duration: 0.3,
@@ -49,6 +51,8 @@ const BlurredOverlayContainer = ({
     },
     visible: {
       opacity: 1,
+      visibility: 'visible',
+      display: 'block',
       transition: {
         delay: transitionDelay / 1000,
         duration: 0.3,
@@ -64,7 +68,7 @@ const BlurredOverlayContainer = ({
       className={clsx(
         className,
         visible || loaded ? 'z-50' : !visible && !loaded ? '-z-50' : 'z-0',
-        'fixed inset-0 flex items-center justify-center h-dvh w-full backdrop-blur-sm',
+        'absolute inset-0 flex items-center justify-center h-full w-full backdrop-blur-sm',
       )}
       style={{
         backgroundColor: `rgba(0, 0, 0, ${bgOpacity / 100})`,

src/components/topbar/TopBar.tsx

@@ -22,7 +22,7 @@ type Props = {
 
 function TopBar({ profileDropState, toggleProfileDropState, menuState, toggleMenuState, searchModalState, toggleSearchModalState, nightModeState, toggleNightModeState }: Props) {
     return (
-        <div className="p-4 pb-0">
+        <div className="fixed top-0 left-0 w-full p-4 pb-0 z-40">
             <div className='bg-white grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 sm:p-6 xl:gap-8 items-center'>
                 <div className='inline-flex justify-between items-center'>
                     <button className='inline-block xl:hidden' onClick={toggleMenuState}>

src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx

@@ -36,7 +36,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
   // }, [location])
 
   return (
-    <div className='h-screen overflow-hidden'>
+    <div className='h-full overflow-hidden py-10 px-4'>
       <header>
         <TopBar
           profileDropState={profileDrop} toggleProfileDropState={toggleProfileDrop}
@@ -44,7 +44,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
           searchModalState={searchModal} toggleSearchModalState={toggleSearchModal}
           nightModeState={nightMode} toggleNightModeState={toggleNightMode} />
       </header>
-      <main className="h-full px-4 pb-44 overflow-y-auto noscrollbar">
+      <main className="h-full pt-14 pb-14 overflow-y-auto noscrollbar">
         {children}
       </main>
       <aside>