From 9b41cb5003e1c750a9ea33cd7e6ddeab20940135 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 11 Mar 2026 02:20:53 +0800
Subject: [PATCH] Fix task title truncation on mobile in Projects tab

Hide verbose metadata columns (status badge, priority badge, date,
subtask count) on mobile and replace with compact priority dot +
overdue indicator. Reduce subtask indent and stack project summary
card vertically on small screens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/projects/ProjectDetail.tsx |  6 +++---
 frontend/src/components/projects/TaskRow.tsx  | 20 ++++++++++++++-----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/projects/ProjectDetail.tsx b/frontend/src/components/projects/ProjectDetail.tsx
index ec4ba11..2a23787 100644
--- a/frontend/src/components/projects/ProjectDetail.tsx
+++ b/frontend/src/components/projects/ProjectDetail.tsx
@@ -424,7 +424,7 @@ export default function ProjectDetail() {
           {/* Project Summary Card */}
           <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
             <CardContent className="p-5">
-              <div className="flex items-center gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6">
                 <div className="flex-1">
                   <div className="flex items-baseline justify-between mb-2">
                     <span className="text-sm text-muted-foreground">Overall Progress</span>
@@ -442,7 +442,7 @@ export default function ProjectDetail() {
                     {completedTasks} of {totalTasks} tasks completed
                   </p>
                 </div>
-                <div className="w-px h-16 bg-border" />
+                <div className="hidden sm:block w-px h-16 bg-border" />
                 <div className="flex items-center gap-5">
                   <div className="text-center">
                     <div className="p-1.5 rounded-md bg-blue-500/10 mx-auto w-fit mb-1">
@@ -597,7 +597,7 @@ export default function ProjectDetail() {
                             />
                             {/* Expanded subtasks */}
                             {isExpanded && hasSubtasks && (
-                              <div className="ml-10 mt-0.5 space-y-0.5">
+                              <div className="ml-5 sm:ml-10 mt-0.5 space-y-0.5">
                                 {task.subtasks.map((subtask) => (
                                   <TaskRow
                                     key={subtask.id}
diff --git a/frontend/src/components/projects/TaskRow.tsx b/frontend/src/components/projects/TaskRow.tsx
index fc78847..c93501c 100644
--- a/frontend/src/components/projects/TaskRow.tsx
+++ b/frontend/src/components/projects/TaskRow.tsx
@@ -52,7 +52,7 @@ export default function TaskRow({
 
   return (
     <div
-      className={`relative flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors duration-150 ${
+      className={`relative flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-2 rounded-lg cursor-pointer transition-colors duration-150 ${
         isSelected
           ? 'bg-accent/5 border-l-2 border-accent'
           : 'border-l-2 border-transparent hover:bg-card-elevated'
@@ -108,18 +108,18 @@ export default function TaskRow({
       </span>
 
       {/* Metadata columns */}
-      <Badge className={`text-[9px] px-1.5 py-0.5 shrink-0 w-16 text-center ${taskStatusColors[task.status]}`}>
+      <Badge className={`text-[9px] px-1.5 py-0.5 shrink-0 w-16 text-center hidden sm:inline-flex ${taskStatusColors[task.status]}`}>
         {task.status.replace('_', ' ')}
       </Badge>
 
       <Badge
-        className={`text-[9px] px-1.5 py-0.5 rounded-full shrink-0 w-14 text-center ${priorityColors[task.priority]}`}
+        className={`text-[9px] px-1.5 py-0.5 rounded-full shrink-0 w-14 text-center hidden sm:inline-flex ${priorityColors[task.priority]}`}
       >
         {task.priority}
       </Badge>
 
       <span
-        className={`text-[11px] shrink-0 tabular-nums w-12 text-right ${
+        className={`text-[11px] shrink-0 tabular-nums w-12 text-right hidden sm:block ${
           task.due_date
             ? isOverdue ? 'text-red-400' : 'text-muted-foreground'
             : 'text-transparent'
@@ -128,12 +128,22 @@ export default function TaskRow({
         {task.due_date ? format(parseISO(task.due_date), 'MMM d') : '—'}
       </span>
 
-      <span className={`text-[11px] shrink-0 tabular-nums w-8 text-right ${
+      <span className={`text-[11px] shrink-0 tabular-nums w-8 text-right hidden sm:block ${
         hasSubtasks ? 'text-muted-foreground' : 'text-transparent'
       }`}>
         {hasSubtasks ? `${completedSubtasks}/${task.subtasks.length}` : '—'}
       </span>
 
+      {/* Mobile-only: compact priority dot + overdue indicator */}
+      <div className="flex items-center gap-1.5 sm:hidden shrink-0">
+        <div className={`h-2 w-2 rounded-full ${
+          task.priority === 'high' ? 'bg-red-400' :
+          task.priority === 'medium' ? 'bg-yellow-400' :
+          task.priority === 'low' ? 'bg-green-400' : 'bg-gray-500'
+        }`} />
+        {isOverdue && <span className="text-[10px] text-red-400 tabular-nums">{task.due_date ? format(parseISO(task.due_date), 'M/d') : ''}</span>}
+      </div>
+
       {/* Subtask progress bar */}
       {hasSubtasks && (
         <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-secondary/50 rounded-full overflow-hidden">