Fix layout issues

src/components/Sidebar.tsx

@@ -13,7 +13,7 @@ const Sidebar = () => {
   return (
     <aside
       className={cn(
-        "bg-dark-purple h-screen p-5 absolute duration-300 transition-width sm:relative",
+        "flex flex-col bg-dark-purple h-full p-5 absolute duration-300 transition-width sm:relative",
         isExtend ? "w-72" : "w-20 "
       )}
     >

src/components/category/CategorySelector.tsx

@@ -6,7 +6,7 @@ const CategorySelector = () => {
   const categories = useCategoryStore((s) => s.categories);
 
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col space-y-2 h-full mb-14 overflow-x-hidden overflow-y-auto scrollbar-light dark:scrollbar-dark scroll-smooth">
       {categories.map((cat) => (
         <NavigationLink
           key={cat.id}

src/index.css

@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+#root {
+  height: 100%;
+}
+
 @layer base {
   .scrollbar-light::-webkit-scrollbar {
     width: 3px;

src/pages/Layout.tsx

@@ -3,9 +3,9 @@ import Sidebar from "../components/Sidebar";
 
 const Layout = () => {
   return (
-    <div className="min-h-screen w-full flex bg-gray-100 dark:bg-gray-800">
+    <div className="w-full h-full flex bg-gray-100 dark:bg-gray-800">
       <Sidebar />
-      <main className="flex-grow w-full h-full max-sm:pl-20">
+      <main className="w-full h-full max-sm:pl-20">
         <Outlet />
       </main>
     </div>

src/pages/TasksPage.tsx

@@ -11,7 +11,7 @@ const TasksPage = () => {
   useSelectCategory(categoryId ?? null);
 
   return (
-    <div className="min-h-screen w-full md:px-5 md:py-4">
+    <div className="w-full md:px-5 md:py-4">
       <div className="container mx-auto flex flex-col gap-2 h-full w-full p-4">
         <TaskFilter />
         <TaskList />