responsive task manager

src/pages/taskmanager/workspace.tsx

@@ -41,23 +41,25 @@ const Workspace: FC = () => {
     : null;
 
   return (
-    <div className="bg-[#01347A] h-full rounded-[32px] overflow-hidden flex flex-col">
+    <div className="bg-[#01347A] h-full rounded-none xl:rounded-[32px] overflow-hidden flex flex-col">
       <HeaderWorkspace />
-      <div className="px-8 flex gap-7 mt-6 flex-1 min-h-0 overflow-auto pb-6 items-start">
-        {columns.map((column) => (
-          <Column
-            key={column.id}
-            column={column}
-            tasks={tasksByColumn[column.id] ?? []}
-            draggedTaskId={draggedTaskId}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-            onDrop={handleDrop}
-            onTaskClick={setSelectedTask}
-          />
-        ))}
+      <div className="flex-1 min-h-0 overflow-x-auto overflow-y-hidden overscroll-x-contain">
+        <div className="flex gap-3 sm:gap-4 xl:gap-7 px-3 sm:px-4 xl:px-8 pt-4 xl:pt-6 pb-4 xl:pb-6 h-full items-start w-max min-w-full">
+          {columns.map((column) => (
+            <Column
+              key={column.id}
+              column={column}
+              tasks={tasksByColumn[column.id] ?? []}
+              draggedTaskId={draggedTaskId}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+              onDrop={handleDrop}
+              onTaskClick={setSelectedTask}
+            />
+          ))}
 
-        <AddNewColumn />
+          <AddNewColumn />
+        </div>
       </div>
 
       <TaskDetailModal