refactor(dashboard): improve responsive column layout with auto-fit grid

app/(app)/dashboard/Board.tsx

@@ -98,7 +98,7 @@ export default function Board({ tasks }: { tasks: Task[] }) {
       <Header onTaskDelete={deleteTask} />
 
       {/* Columns Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-6 items-start">
+      <div className="grid grid-auto-fit-450 gap-4 items-start">
         {COLUMNS.map((col) => {
           const columnTasks = tasks.filter((t) => t.status === col.id);
           return (

app/globals.css

@@ -31,3 +31,7 @@
     -moz-osx-font-smoothing: grayscale;
   }
 }
+
+@utility grid-auto-fit-450 {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
+}