PATCH scrollbar issue

frontend/src/components/Sidebar.tsx

@@ -9,7 +9,7 @@ type props = {
 
 const Sidebar = ({className}: props) => {
     return (
-        <div className={clsx("w-64 h-screen bg-white shadow-sm border-r px-4 py-6 flex flex-col gap-2", className)}>
+        <div className={clsx("h-screen bg-white shadow-sm border-r flex flex-col gap-2 mr-5", className)}>
             <Link
                 to="/create">
                 <MenuButton className={"flex items-center gap-2"}>

frontend/src/layouts/MainLayout.tsx

@@ -8,18 +8,17 @@ const MainLayout = () => {
     const [sidebarToggled, setSidebarToggled] = useState(false);
 
     return (
-        <div className={`transition-all duration-300 grid ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} grid-rows-[1fr_8fr] gap-4`}>
+        <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} grid-rows-[auto_1fr]`}>
             <Sidebar
-                className={`row-span-2 transition-all duration-300 ${sidebarToggled ? "-translate-x-full": "translate-x-0"}`}/>
+                className={`row-span-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${sidebarToggled ? "-translate-x-full" : "translate-x-0"}`}/>
             <Topbar
-                className={"transition-all duration-300"}
+                className="transition-all duration-300"
                 sidebarToggled={sidebarToggled}
                 setSidebarToggled={setSidebarToggled}/>
-            <div className="flex-1 p-4">
-                <Outlet/> {/* This renders the nested route content */}
+            <div className="overflow-auto">
+                <Outlet />
             </div>
         </div>
-    )
+    );
 };
-
 export default MainLayout;