lorentz/seubert-claims
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Task card: larger icons (h-5), auto-width data column

Browse source
This commit is contained in:
lorentz 2026-04-10 14:42:32 +00:00
parent 5c1ae6858a
commit a215d7ce44
1 changed files with 13 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

26
ondeck/src/app/(dashboard)/tasks/page-client.tsx
View file

@ -239,11 +239,11 @@ function TaskCard({ task: initial }: { task: Task }) {
)}
</div>
{/* Right sidebar: 2-col grid */}
<div className="shrink-0 w-[120px] border-l border-border flex flex-col text-[12px]">
<div className="flex-1 grid grid-cols-2">
{/* Left col: Due / Status / Level (data only) */}
<div className="flex flex-col justify-center gap-1.5 px-2.5 py-2.5">
{/* Right sidebar: 2-col — data col auto-width, icon col fixed */}
<div className="shrink-0 border-l border-border flex flex-col text-[12px]">
<div className="flex-1 flex">
{/* Left col: Due / Status / Level (data only, fit to content) */}
<div className="flex flex-col justify-center gap-1.5 px-3 py-2.5 whitespace-nowrap">
<span className={`font-medium ${isOverdue ? 'text-red-500' : 'text-foreground'}`} suppressHydrationWarning>
{formatDate(task.dueDate)}
</span>
@ -252,8 +252,8 @@ function TaskCard({ task: initial }: { task: Task }) {
{levelLabel}
</span>
</div>
{/* Right col: Complete / N/A / Edit (icons) */}
<div className="flex flex-col items-center justify-center gap-0.5 border-l border-border">
{/* Right col: Complete / N/A / Edit (icon-only) */}
<div className="flex flex-col items-center justify-center gap-1 px-2 border-l border-border">
<button
onClick={handleToggleStatus}
disabled={toggling}
@ -261,8 +261,8 @@ function TaskCard({ task: initial }: { task: Task }) {
title={isCompleted ? 'Reopen' : 'Complete'}
>
{isCompleted
? <RotateCcw className="h-3.5 w-3.5" />
: <CheckCircle2 className="h-3.5 w-3.5" />
? <RotateCcw className="h-5 w-5" />
: <CheckCircle2 className="h-5 w-5" />
}
</button>
{task.status !== 'COMPLETED' && task.status !== 'NA' && task.status !== 'CANCELLED' && (
@ -271,7 +271,7 @@ function TaskCard({ task: initial }: { task: Task }) {
className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
title="Mark as N/A"
>
<Ban className="h-3.5 w-3.5" />
<Ban className="h-5 w-5" />
</button>
)}
<button
@ -279,18 +279,18 @@ function TaskCard({ task: initial }: { task: Task }) {
className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
title="Edit task"
>
<Pencil className="h-3.5 w-3.5" />
<Pencil className="h-5 w-5" />
</button>
</div>
</div>
{/* Notes: full width bottom */}
<button
onClick={() => setNoteOpen((o) => !o)}
className={`flex items-center justify-center gap-1 py-1.5 border-t border-border text-[11px] font-medium transition-colors ${
className={`flex items-center justify-center gap-1.5 py-1.5 border-t border-border text-[11px] font-medium transition-colors ${
noteOpen ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted'
}`}
>
<MessageSquare className="h-3 w-3" />
<MessageSquare className="h-4 w-4" />
{notes.length > 0 ? `Notes (${notes.length})` : 'Notes'}
</button>
</div>