From 523a7f00ccd50bb6331cafc0b8c901cb6c41a933 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Thu, 18 Sep 2025 15:44:06 +0200
Subject: [PATCH] fix: improve QuickAddTask and TagInput components - Added
 `min-w-0` class to the title input in `QuickAddTask` for better layout
 handling. - Updated priority select to use `flex-shrink-0` and `w-10` for
 consistent sizing and added title tooltip for better UX. - Enhanced
 `TagInput` to support `compactSuggestions` prop, adjusting suggestion display
 based on available space. - Modified suggestion container to conditionally
 apply grid classes based on `compactSuggestions`, improving responsiveness.

---
 components/kanban/QuickAddTask.tsx | 10 ++++++----
 components/ui/TagInput.tsx         |  8 +++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/components/kanban/QuickAddTask.tsx b/components/kanban/QuickAddTask.tsx
index c1068d0..a479ed4 100644
--- a/components/kanban/QuickAddTask.tsx
+++ b/components/kanban/QuickAddTask.tsx
@@ -131,7 +131,7 @@ export function QuickAddTask({ status, onSubmit, onCancel, swimlaneContext }: Qu
     <div onBlur={handleBlur}>
       <Card className="p-3 border-dashed border-[var(--primary)]/30 bg-[var(--card)]/50 hover:border-[var(--primary)]/50 transition-all duration-300">
       {/* Header avec titre et priorité */}
-      <div className="flex items-start gap-2 mb-2">
+      <div className="flex items-start gap-2 mb-2 min-w-0">
         <input
           ref={titleRef}
           type="text"
@@ -141,7 +141,7 @@ export function QuickAddTask({ status, onSubmit, onCancel, swimlaneContext }: Qu
           onFocus={() => setActiveField('title')}
           placeholder="Titre de la tâche..."
           disabled={isSubmitting}
-          className="flex-1 bg-transparent border-none outline-none text-[var(--foreground)] font-mono text-sm font-medium placeholder-[var(--muted-foreground)] leading-tight"
+          className="flex-1 min-w-0 bg-transparent border-none outline-none text-[var(--foreground)] font-mono text-sm font-medium placeholder-[var(--muted-foreground)] leading-tight"
         />
         
         {/* Indicateur de priorité */}
@@ -149,11 +149,12 @@ export function QuickAddTask({ status, onSubmit, onCancel, swimlaneContext }: Qu
           value={formData.priority}
           onChange={(e) => setFormData(prev => ({ ...prev, priority: e.target.value as TaskPriority }))}
           disabled={isSubmitting}
-          className="bg-transparent border-none outline-none text-xs font-mono text-[var(--muted-foreground)]"
+          className="flex-shrink-0 w-10 bg-transparent border-none outline-none text-lg text-[var(--muted-foreground)] cursor-pointer text-center"
+          title={getAllPriorities().find(p => p.key === formData.priority)?.label}
         >
           {getAllPriorities().map(priorityConfig => (
             <option key={priorityConfig.key} value={priorityConfig.key}>
-              {priorityConfig.icon} {priorityConfig.label}
+              {priorityConfig.icon}
             </option>
           ))}
         </select>
@@ -179,6 +180,7 @@ export function QuickAddTask({ status, onSubmit, onCancel, swimlaneContext }: Qu
           placeholder="Tags..."
           maxTags={5}
           className="text-xs"
+          compactSuggestions={true}
         />
       </div>
 
diff --git a/components/ui/TagInput.tsx b/components/ui/TagInput.tsx
index 15214ee..e4e2a36 100644
--- a/components/ui/TagInput.tsx
+++ b/components/ui/TagInput.tsx
@@ -11,6 +11,7 @@ interface TagInputProps {
   placeholder?: string;
   maxTags?: number;
   className?: string;
+  compactSuggestions?: boolean; // Pour adapter selon l'espace
 }
 
 export function TagInput({ 
@@ -18,7 +19,8 @@ export function TagInput({
   onChange, 
   placeholder = "Ajouter des tags...", 
   maxTags = 10,
-  className = "" 
+  className = "",
+  compactSuggestions = false
 }: TagInputProps) {
   const [inputValue, setInputValue] = useState('');
   const [showSuggestions, setShowSuggestions] = useState(false);
@@ -150,14 +152,14 @@ export function TagInput({
       {showSuggestions && (suggestions.length > 0 || loading) && (
         <div
           ref={suggestionsRef}
-          className="absolute top-full left-0 right-0 mt-1 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto"
+          className="absolute top-full left-0 right-0 mt-1 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg z-[9999] max-h-64 overflow-y-auto"
         >
           {loading ? (
             <div className="p-3 text-center text-[var(--muted-foreground)] text-sm">
               Recherche...
             </div>
           ) : (
-            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2 p-3">
+            <div className={`gap-2 p-3 ${compactSuggestions ? 'grid grid-cols-1' : 'grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'}`}>
               {suggestions.map((tag, index) => (
                 <button
                   key={tag.id}