From 735fb542660abd7fcba4536df4df915cb4f7e181 Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Fri, 4 Jul 2025 00:47:21 +0100
Subject: [PATCH] Made the task details header more concise by: (#70)

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.
---
 .../components/tasks/TaskDetailsHeader.tsx    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/tasks/TaskDetailsHeader.tsx b/frontend/src/components/tasks/TaskDetailsHeader.tsx
index 5d1960c7..8ab2aed4 100644
--- a/frontend/src/components/tasks/TaskDetailsHeader.tsx
+++ b/frontend/src/components/tasks/TaskDetailsHeader.tsx
@@ -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>
             )}