From a215d7ce4440169c6357799f833374521da91285 Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Fri, 10 Apr 2026 14:42:32 +0000
Subject: [PATCH] Task card: larger icons (h-5), auto-width data column

---
 .../src/app/(dashboard)/tasks/page-client.tsx | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/ondeck/src/app/(dashboard)/tasks/page-client.tsx b/ondeck/src/app/(dashboard)/tasks/page-client.tsx
index 14486ec..ddd6766 100644
--- a/ondeck/src/app/(dashboard)/tasks/page-client.tsx
+++ b/ondeck/src/app/(dashboard)/tasks/page-client.tsx
@@ -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>