rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix task title truncation on mobile in Projects tab

Browse Source 
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>
This commit is contained in:
Kyle 2026-03-11 02:20:53 +08:00
parent 0fc2d05085
commit 9b41cb5003
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/projects/ProjectDetail.tsx
View File

@ -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}

20
frontend/src/components/projects/TaskRow.tsx
View File

@ -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">