was trying to create a sidebar layout like gmail, got everything working mostly, but whenever the area inside the "ScrollArea" component from shadcn (same while doing it manually with overflow-y-scroll) is scrolled down and changing the page the top of the page disappears. after removing the overflow hidden from the parent, it was showing the page scroll the exact amount of the top bar whenever the page changed (while the page was scrolled down)
(video example proived)
any idea why its happening or what could I do to fix?

Here's the code for the layout :

    <>
      <div className="w-full h-screen overflow-hidden flex relative">
        <SideBar className="w-[13%] min-w-[175px]"></SideBar>
        <div className=" h-full w-full flex flex-col overflow-hidden">
          <TopBar></TopBar>
          {/* <div className="content_wrap h-full  w-full overflow-y-scroll border-l border-t">
            {children}
          </div> */}
          <ScrollArea className="content_wrap w-full h-full border-l border-t rounded-tl-lg">
            <div>{children}</div>
          </ScrollArea>
        </div>

        <div className="circel bg_primary_radial_gradient w-[150%] sm:w-full aspect-square rounded-full absolute right-[-40%] top-0 max-[1200px]:top-[90%]  pointer-events-none z-[-3] opacity-70"></div>
      </div>
      {/* {children} */}
    </>
  );