From db16a07f6883960ac162967fcdd6476feb130741 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 11 Mar 2026 02:24:09 +0800
Subject: [PATCH] Fix project title cutoff on mobile in ProjectDetail header

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>
---
 frontend/src/components/projects/ProjectDetail.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/projects/ProjectDetail.tsx b/frontend/src/components/projects/ProjectDetail.tsx
index 2a23787..17131aa 100644
--- a/frontend/src/components/projects/ProjectDetail.tsx
+++ b/frontend/src/components/projects/ProjectDetail.tsx
@@ -375,14 +375,14 @@ export default function ProjectDetail() {
   return (
     <div className="flex flex-col h-full animate-fade-in">
       {/* 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')}>
           <ArrowLeft className="h-5 w-5" />
         </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}
         </h1>
-        <Badge className={statusColors[project.status]}>
+        <Badge className={`shrink-0 hidden sm:inline-flex ${statusColors[project.status]}`}>
           {statusLabels[project.status]}
         </Badge>
         <Button
@@ -390,18 +390,18 @@ export default function ProjectDetail() {
           size="icon"
           onClick={() => toggleTrackMutation.mutate()}
           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'}
         >
           <Pin className={`h-4 w-4 ${project.is_tracked ? 'fill-current' : ''}`} />
         </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>
         </Button>
         <Button
           variant="ghost"
           size="sm"
-          className="text-destructive hover:bg-destructive/10"
+          className="shrink-0 text-destructive hover:bg-destructive/10"
           onClick={() => {
             if (!window.confirm('Delete this project and all its tasks?')) return;
             deleteProjectMutation.mutate();