feat: enhance KanbanColumn and TaskCard styles for better responsiveness

- Updated KanbanColumn to adjust width for medium screens, improving layout flexibility.
- Modified TaskCard title font size for better readability and increased line clamp for title overflow.
- Adjusted margin for task tags based on task status, enhancing visual clarity.
This commit is contained in:
Julien Froidefond
2025-09-14 21:42:39 +02:00
parent ef3ee1bdbf
commit 249f3a750f
2 changed files with 7 additions and 3 deletions

View File

@@ -67,7 +67,7 @@ export function KanbanColumn({ id, title, color, tasks, onCreateTask, onDeleteTa
const badgeVariant = color === 'green' ? 'success' : color === 'blue' ? 'primary' : color === 'red' ? 'danger' : 'default';
return (
<div className="flex-shrink-0 w-80 h-full">
<div className="flex-shrink-0 w-80 md:w-1/4 md:flex-1 h-full">
<Card
ref={setNodeRef}
variant="elevated"

View File

@@ -128,7 +128,7 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
/>
) : (
<h4
className="font-mono text-sm font-medium text-slate-100 leading-tight line-clamp-1 flex-1 cursor-pointer hover:text-cyan-300 transition-colors"
className="font-mono text-xs font-medium text-slate-100 leading-tight line-clamp-2 flex-1 cursor-pointer hover:text-cyan-300 transition-colors"
onClick={handleTitleClick}
title={onUpdateTitle ? "Cliquer pour éditer" : undefined}
>
@@ -254,7 +254,11 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
{/* Tags avec couleurs */}
{task.tags && task.tags.length > 0 && (
<div className="mb-3">
<div className={
(task.dueDate || (task.source && task.source !== 'manual') || task.completedAt)
? "mb-3"
: "mb-0"
}>
<TagDisplay
tags={task.tags}
availableTags={availableTags}