From f3cb400d4465cd88feb4cf74e0f050171c370793 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Thu, 20 Aug 2026 03:58:03 +0200
Subject: [PATCH] refactor(dashboard): improve responsive column layout with
 auto-fit grid

---
 app/(app)/dashboard/Board.tsx | 2 +-
 app/globals.css               | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/(app)/dashboard/Board.tsx b/app/(app)/dashboard/Board.tsx
index 172f382..13d6037 100644
--- a/app/(app)/dashboard/Board.tsx
+++ b/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 (
diff --git a/app/globals.css b/app/globals.css
index afd7e10..244cbb9 100644
--- a/app/globals.css
+++ b/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));
+}