From cd71824cc82090eb68472de84711c637e351b092 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Thu, 25 Sep 2025 22:10:00 +0200
Subject: [PATCH] style: refine button styles and layout in KanbanFilters -
 Changed button padding and layout from grid to flex for better
 responsiveness. - Adjusted gap sizes for a more compact design. - Ensured
 consistent styling across priority and tag buttons for improved UI coherence.

---
 src/components/kanban/KanbanFilters.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/kanban/KanbanFilters.tsx b/src/components/kanban/KanbanFilters.tsx
index e16cc89..e360266 100644
--- a/src/components/kanban/KanbanFilters.tsx
+++ b/src/components/kanban/KanbanFilters.tsx
@@ -346,12 +346,12 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
               <label className="block text-xs font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
                 Priorités
               </label>
-              <div className="grid grid-cols-2 gap-2">
+              <div className="flex flex-wrap gap-1">
                 {priorityOptions.filter(priority => priority.count > 0).map((priority) => (
                   <button
                     key={priority.value}
                     onClick={() => handlePriorityToggle(priority.value)}
-                    className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-xs font-medium whitespace-nowrap ${
+                    className={`flex items-center gap-2 px-2 py-1 rounded border transition-all text-xs font-medium ${
                       filters.priorities?.includes(priority.value)
                         ? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
                         : 'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border)]'
@@ -373,12 +373,12 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
                 <label className="block text-xs font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
                   Tags
                 </label>
-                <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
+                <div className="flex flex-wrap gap-1 max-h-32 overflow-y-auto">
                   {sortedTags.filter(tag => (tagCounts[tag.name] || 0) > 0).map((tag) => (
                     <button
                       key={tag.id}
                       onClick={() => handleTagToggle(tag.name)}
-                      className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-xs font-medium ${
+                      className={`flex items-center gap-2 px-2 py-1 rounded border transition-all text-xs font-medium ${
                         filters.tags?.includes(tag.name)
                           ? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
                           : 'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border)]'
@@ -401,11 +401,11 @@ export function KanbanFilters({ filters, onFiltersChange, hiddenStatuses: propsH
             <label className="block text-xs font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider mb-3">
               Filtres généraux
             </label>
-            <div className="flex flex-wrap gap-2">
+            <div className="flex flex-wrap gap-1">
               <button
                 type="button"
                 onClick={handleDueDateFilterToggle}
-                className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-xs font-medium cursor-pointer ${
+                className={`flex items-center gap-2 px-2 py-1 rounded border transition-all text-xs font-medium cursor-pointer ${
                   filters.showWithDueDate
                     ? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
                     : 'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border)] hover:bg-[var(--card)]/80'