daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made the task details header more concise by: (#70)

Browse Source 
1. **Reduced padding**: Changed from `p-6 pb-4` to `p-4 pb-2` 
2. **Smaller title**: Changed from `text-xl` to `text-lg` and reduced bottom margin
3. **Compact description**: 
   - Smaller text (`text-xs` instead of `text-sm`)
   - Less padding (`p-2` instead of `p-3`)
   - Lighter background (`bg-muted/20` instead of `bg-muted/30`)
   - Added left border for visual distinction
   - Reduced line clamp from 6 to 3 lines
   - Lower expansion threshold (150 vs 200 characters)

This provides significantly more space for content below while maintaining readability.
This commit is contained in:
Louis Knight-Webb
2025-07-04 00:47:21 +01:00
committed by GitHub
parent 8eeec4976f
commit 735fb54266
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/tasks/TaskDetailsHeader.tsx
View File

@@ -53,10 +53,10 @@ export function TaskDetailsHeader({
return (
<div>
{/* Title and Task Actions */}
<div className="p-6 pb-4">
<div className="p-4 pb-2">
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0">
<h2 className="text-xl font-bold mb-2 line-clamp-2">
<h2 className="text-lg font-bold mb-1 line-clamp-2">
{task.title}
</h2>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -118,27 +118,27 @@ export function TaskDetailsHeader({
</div>
{/* Description */}
<div className="mt-4">
<div className="p-3 bg-muted/30 rounded-md">
<div className="mt-2">
<div className="p-2 bg-muted/20 rounded border-l-2 border-muted">
{task.description ? (
<div>
<p
className={`text-sm whitespace-pre-wrap ${
!isDescriptionExpanded && task.description.length > 200
? 'line-clamp-6'
className={`text-xs whitespace-pre-wrap text-muted-foreground ${
!isDescriptionExpanded && task.description.length > 150
? 'line-clamp-3'
: ''
}`}
>
{task.description}
</p>
{task.description.length > 200 && (
{task.description.length > 150 && (
<Button
variant="ghost"
size="sm"
onClick={() =>
setIsDescriptionExpanded(!isDescriptionExpanded)
}
className="mt-2 p-0 h-auto text-xs text-muted-foreground hover:text-foreground"
className="mt-1 p-0 h-auto text-xs text-muted-foreground hover:text-foreground"
>
{isDescriptionExpanded ? (
<>
@@ -155,7 +155,7 @@ export function TaskDetailsHeader({
)}
</div>
) : (
<p className="text-sm text-muted-foreground italic">
<p className="text-xs text-muted-foreground italic">
No description provided
</p>
)}