responsive task manager

src/pages/taskmanager/components/Column.tsx

@@ -46,7 +46,7 @@ const Column: FC<Props> = ({
 
   return (
     <div
-      className={`bg-[#F0F3F7] rounded-xl p-6 max-w-[310px] w-full flex flex-col self-start transition-colors ${
+      className={`bg-[#F0F3F7] rounded-xl p-3 sm:p-4 xl:p-6 w-[272px] sm:w-[288px] xl:w-[310px] shrink-0 flex flex-col max-h-[calc(100dvh-140px)] sm:max-h-[calc(100dvh-152px)] xl:max-h-[calc(100dvh-220px)] transition-colors ${
         isDragOver ? "ring-2 ring-primary/40" : ""
       }`}
       onDragOver={handleDragOver}
@@ -54,35 +54,33 @@ const Column: FC<Props> = ({
       onDrop={(e) => handleDrop(e, tasks.length)}
     >
       <div className="flex justify-between items-center shrink-0">
-        <div className="font-bold text-sm">{column.title}</div>
-        <More size={20} color="black" />
+        <div className="font-bold text-sm truncate">{column.title}</div>
+        <More size={20} color="black" className="shrink-0" />
       </div>
 
-      {tasks.length > 0 && (
-        <div className="mt-5 flex flex-col gap-4">
-          {tasks.map((task, index) => (
-            <div
-              key={task.id}
-              onDragOver={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }}
-              onDrop={(e) => handleDrop(e, index)}
-            >
-              <Task
-                task={task}
-                isDragging={draggedTaskId === task.id}
-                onDragStart={onDragStart}
-                onDragEnd={onDragEnd}
-                onClick={onTaskClick}
-              />
-            </div>
-          ))}
-        </div>
-      )}
+      <div className="mt-3 sm:mt-4 xl:mt-5 flex-1 min-h-0 overflow-y-auto overscroll-y-contain flex flex-col gap-3 sm:gap-4">
+        {tasks.map((task, index) => (
+          <div
+            key={task.id}
+            onDragOver={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            onDrop={(e) => handleDrop(e, index)}
+          >
+            <Task
+              task={task}
+              isDragging={draggedTaskId === task.id}
+              onDragStart={onDragStart}
+              onDragEnd={onDragEnd}
+              onClick={onTaskClick}
+            />
+          </div>
+        ))}
+      </div>
 
       {isAdding ? (
-        <div className="mt-5 shrink-0 flex flex-col gap-3">
+        <div className="mt-3 sm:mt-4 xl:mt-5 shrink-0 flex flex-col gap-3">
           <input
             type="text"
             placeholder="عنوان تسک"
@@ -111,7 +109,7 @@ const Column: FC<Props> = ({
         <button
           type="button"
           onClick={() => setIsAdding(true)}
-          className="mt-5 flex gap-2 items-center shrink-0 cursor-pointer"
+          className="mt-3 sm:mt-4 xl:mt-5 flex gap-2 items-center shrink-0 cursor-pointer"
         >
           <AddCircle size={18} color="#888888" />
           <span className="text-description text-[13px] mt-0.5">اضافه کردن تسک</span>