From 3da9acd9d603dd971b355ac0b5679ecfc92e89d2 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 28 Feb 2026 01:44:20 +0100
Subject: [PATCH] Fixed overflow on board

---
 src/components/sidebar/AppSidebar.tsx   |  2 +-
 src/components/view/TaskView.tsx        | 13 ++++++++-----
 src/components/view/board/BoardView.tsx |  8 ++++----
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/sidebar/AppSidebar.tsx b/src/components/sidebar/AppSidebar.tsx
index 7b6ef2c..200c40c 100644
--- a/src/components/sidebar/AppSidebar.tsx
+++ b/src/components/sidebar/AppSidebar.tsx
@@ -82,7 +82,7 @@ export default function AppSidebar({
         <SidebarFooter />
       </Sidebar>
 
-      <main className="w-svw flex-1 flex flex-col">{children}</main>
+      <main className="w-svw flex-1 flex flex-col min-h-0">{children}</main>
     </SidebarProvider>
   );
 }
diff --git a/src/components/view/TaskView.tsx b/src/components/view/TaskView.tsx
index 794bcf0..adffc7a 100644
--- a/src/components/view/TaskView.tsx
+++ b/src/components/view/TaskView.tsx
@@ -91,9 +91,12 @@ export default function TaskView({
     downloadFile(content, filename, "text/plain");
   };
   return (
-    <div className="px-6 pt-2 pb-6 flex flex-col gap-4 h-full">
+    <div className="px-6 pt-2 pb-6 flex flex-col gap-4 h-full flex-1 min-h-0">
       <div className="flex items-center justify-end"></div>
-      <Tabs defaultValue="board" className="w-full h-full flex flex-col">
+      <Tabs
+        defaultValue="board"
+        className="w-full h-full flex flex-col flex-1 min-h-0"
+      >
         <div className="flex justify-between shrink-0">
           <TabsList className="mb-4">
             <TabsTrigger value="board">Board</TabsTrigger>
@@ -123,7 +126,7 @@ export default function TaskView({
           </DropdownMenu>
         </div>
 
-        <TabsContent value="board" className="mt-0 h-full">
+        <TabsContent value="board" className="mt-0 h-full flex-1 min-h-0">
           <BoardView
             tasks={tasks}
             setTasks={setTasks}
@@ -135,7 +138,7 @@ export default function TaskView({
           />
         </TabsContent>
 
-        <TabsContent value="table" className="mt-0 h-full">
+        <TabsContent value="table" className="mt-0 h-full flex-1 min-h-0">
           <TableView
             tasks={tasks}
             setTasks={setTasks}
@@ -147,7 +150,7 @@ export default function TaskView({
           />
         </TabsContent>
 
-        <TabsContent value="edit" className="mt-0 h-full">
+        <TabsContent value="edit" className="mt-0 h-full flex-1 min-h-0">
           <EditView
             tags={tags}
             statuses={statuses}
diff --git a/src/components/view/board/BoardView.tsx b/src/components/view/board/BoardView.tsx
index 0af4d27..8e6d95c 100644
--- a/src/components/view/board/BoardView.tsx
+++ b/src/components/view/board/BoardView.tsx
@@ -43,16 +43,16 @@ export default function BoardView({
   }));
 
   return (
-    <div className="w-full h-full flex flex-col gap-6 overflow-hidden flex-1">
+    <div className="w-full h-full flex flex-col gap-6 overflow-hidden flex-1 min-h-0">
       <DragDropContext onDragEnd={onDragEnd}>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start flex-1 h-full">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start flex-1 h-full min-h-0">
           {tasksByStatus.map(({ status, tasks: statusTasks }) => (
             <Droppable key={status.id} droppableId={status.id}>
               {(provided) => (
                 <Card
                   ref={provided.innerRef}
                   {...provided.droppableProps}
-                  className="bg-background h-full flex flex-col overflow-hidden"
+                  className="bg-background h-full flex flex-col overflow-hidden min-h-0"
                 >
                   <CardHeader>
                     <CardTitle className="flex items-center justify-between">
@@ -67,7 +67,7 @@ export default function BoardView({
                       </Button>
                     </CardTitle>
                   </CardHeader>
-                  <CardContent className="flex-1 overflow-y-auto">
+                  <CardContent className="flex-1 overflow-y-auto min-h-0">
                     <div className="flex flex-col gap-3">
                       {statusTasks.map((task, index) => (
                         <Draggable