fix(mobile): hide duplicate detail-header title on mobile
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>
This commit is contained in:
@@ -170,7 +170,9 @@ export function BerthDetailHeader({ berth }: BerthDetailHeaderProps) {
|
|||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex items-center gap-3 flex-wrap">
|
<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
|
<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'}`}
|
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'}`}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -74,7 +74,9 @@ export function ClientDetailHeader({ client }: ClientDetailHeaderProps) {
|
|||||||
<div className="flex items-start gap-3 flex-wrap">
|
<div className="flex items-start gap-3 flex-wrap">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<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 && (
|
{isArchived && (
|
||||||
<Badge variant="secondary" className="text-xs">
|
<Badge variant="secondary" className="text-xs">
|
||||||
Archived
|
Archived
|
||||||
|
|||||||
@@ -80,7 +80,9 @@ export function CompanyDetailHeader({ company }: CompanyDetailHeaderProps) {
|
|||||||
<div className="flex items-start gap-3 flex-wrap">
|
<div className="flex items-start gap-3 flex-wrap">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<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
|
<span
|
||||||
className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusColor}`}
|
className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusColor}`}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -145,7 +145,9 @@ export function YachtDetailHeader({ yacht }: YachtDetailHeaderProps) {
|
|||||||
<div className="flex items-start gap-3 flex-wrap">
|
<div className="flex items-start gap-3 flex-wrap">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<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
|
<span
|
||||||
className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusColor}`}
|
className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusColor}`}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user