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

Fix project title cutoff on mobile in ProjectDetail header

Browse Source 
Reduce header gap to gap-2 on mobile, add min-w-0 so title can
shrink properly, hide status badge on small screens, and add
shrink-0 to action buttons to prevent them from compressing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-11 02:24:09 +08:00
parent 9b41cb5003
commit db16a07f68
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -375,14 +375,14 @@ export default function ProjectDetail() {
return ( return (
<div className="flex flex-col h-full animate-fade-in"> <div className="flex flex-col h-full animate-fade-in">
{/* Header */} {/* Header */}
<div className="border-b bg-card px-4 md:px-6 h-16 flex items-center gap-4 shrink-0"> <div className="border-b bg-card px-4 md:px-6 h-16 flex items-center gap-2 md:gap-4 shrink-0">
<Button variant="ghost" size="icon" onClick={() => navigate('/projects')}> <Button variant="ghost" size="icon" onClick={() => navigate('/projects')}>
<ArrowLeft className="h-5 w-5" /> <ArrowLeft className="h-5 w-5" />
</Button> </Button>
<h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight flex-1 truncate"> <h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight flex-1 truncate min-w-0">
{project.name} {project.name}
</h1> </h1>
<Badge className={statusColors[project.status]}> <Badge className={`shrink-0 hidden sm:inline-flex ${statusColors[project.status]}`}>
{statusLabels[project.status]} {statusLabels[project.status]}
</Badge> </Badge>
<Button <Button
@ -390,18 +390,18 @@ export default function ProjectDetail() {
size="icon" size="icon"
onClick={() => toggleTrackMutation.mutate()} onClick={() => toggleTrackMutation.mutate()}
disabled={toggleTrackMutation.isPending} disabled={toggleTrackMutation.isPending}
className={project.is_tracked ? 'text-accent' : 'text-muted-foreground'} className={`shrink-0 ${project.is_tracked ? 'text-accent' : 'text-muted-foreground'}`}
title={project.is_tracked ? 'Untrack project' : 'Track project'} title={project.is_tracked ? 'Untrack project' : 'Track project'}
> >
<Pin className={`h-4 w-4 ${project.is_tracked ? 'fill-current' : ''}`} /> <Pin className={`h-4 w-4 ${project.is_tracked ? 'fill-current' : ''}`} />
</Button> </Button>
<Button variant="outline" size="sm" onClick={() => setShowProjectForm(true)}> <Button variant="outline" size="sm" className="shrink-0" onClick={() => setShowProjectForm(true)}>
<Pencil className="h-3.5 w-3.5 md:mr-2" /><span className="hidden md:inline">Edit</span> <Pencil className="h-3.5 w-3.5 md:mr-2" /><span className="hidden md:inline">Edit</span>
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="text-destructive hover:bg-destructive/10" className="shrink-0 text-destructive hover:bg-destructive/10"
onClick={() => { onClick={() => {
if (!window.confirm('Delete this project and all its tasks?')) return; if (!window.confirm('Delete this project and all its tasks?')) return;
deleteProjectMutation.mutate(); deleteProjectMutation.mutate();