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.
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user