From 16ad61ce155509f1e9f62b059fb9de8c3a6bc642 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Fri, 1 May 2026 16:09:32 +0200
Subject: [PATCH] fix(mobile): hide duplicate detail-header title on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mobile topbar already shows the entity name pushed via
useMobileChrome, so the gradient detail-header strip was rendering it
a second time. Hides the inline h1 below sm: while keeping the source
/ email / phone meta and action buttons visible — the strip's
practical content (actions + meta) stays where users need it, and the
title responsibility moves cleanly to the topbar.

Affects: clients, yachts, companies, berths detail headers.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/berths/berth-detail-header.tsx      | 4 +++-
 src/components/clients/client-detail-header.tsx    | 4 +++-
 src/components/companies/company-detail-header.tsx | 4 +++-
 src/components/yachts/yacht-detail-header.tsx      | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/berths/berth-detail-header.tsx b/src/components/berths/berth-detail-header.tsx
index 5df6750..9558c84 100644
--- a/src/components/berths/berth-detail-header.tsx
+++ b/src/components/berths/berth-detail-header.tsx
@@ -170,7 +170,9 @@ export function BerthDetailHeader({ berth }: BerthDetailHeaderProps) {
         <div className="flex items-start gap-4">
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-3 flex-wrap">
-              <h1 className="text-2xl font-bold text-foreground">Berth {berth.mooringNumber}</h1>
+              <h1 className="hidden sm:block text-2xl font-bold text-foreground">
+                Berth {berth.mooringNumber}
+              </h1>
               <span
                 className={`inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium ${STATUS_COLORS[berth.status] ?? 'bg-muted text-muted-foreground border-muted'}`}
               >
diff --git a/src/components/clients/client-detail-header.tsx b/src/components/clients/client-detail-header.tsx
index 57f8e0b..becfbc4 100644
--- a/src/components/clients/client-detail-header.tsx
+++ b/src/components/clients/client-detail-header.tsx
@@ -74,7 +74,9 @@ export function ClientDetailHeader({ client }: ClientDetailHeaderProps) {
         <div className="flex items-start gap-3 flex-wrap">
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 flex-wrap">
-              <h1 className="text-2xl font-bold text-foreground truncate">{client.fullName}</h1>
+              <h1 className="hidden sm:block text-2xl font-bold text-foreground truncate">
+                {client.fullName}
+              </h1>
               {isArchived && (
                 <Badge variant="secondary" className="text-xs">
                   Archived
diff --git a/src/components/companies/company-detail-header.tsx b/src/components/companies/company-detail-header.tsx
index 71d5e2b..b7f0f9f 100644
--- a/src/components/companies/company-detail-header.tsx
+++ b/src/components/companies/company-detail-header.tsx
@@ -80,7 +80,9 @@ export function CompanyDetailHeader({ company }: CompanyDetailHeaderProps) {
         <div className="flex items-start gap-3 flex-wrap">
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 flex-wrap">
-              <h1 className="text-2xl font-bold text-foreground truncate">{company.name}</h1>
+              <h1 className="hidden sm:block text-2xl font-bold text-foreground truncate">
+                {company.name}
+              </h1>
               <span
                 className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusColor}`}
               >
diff --git a/src/components/yachts/yacht-detail-header.tsx b/src/components/yachts/yacht-detail-header.tsx
index 3663417..2a60245 100644
--- a/src/components/yachts/yacht-detail-header.tsx
+++ b/src/components/yachts/yacht-detail-header.tsx
@@ -145,7 +145,9 @@ export function YachtDetailHeader({ yacht }: YachtDetailHeaderProps) {
         <div className="flex items-start gap-3 flex-wrap">
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 flex-wrap">
-              <h1 className="text-2xl font-bold text-foreground truncate">{yacht.name}</h1>
+              <h1 className="hidden sm:block text-2xl font-bold text-foreground truncate">
+                {yacht.name}
+              </h1>
               <span
                 className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusColor}`}
               >