letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(mobile): wrap detail-header actions on narrow viewports

Browse Source 
Action buttons in entity detail headers (Invite/GDPR/Archive on
clients, similar sets elsewhere) overflowed off-screen at 393px
because the actions row was flex without flex-wrap. Adds flex-wrap
so buttons drop to a second/third row instead of clipping.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
2026-05-01 15:48:51 +02:00
parent 7e8110b2ff
commit a653c8e039
4 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/berths/berth-detail-header.tsx
View File

@@ -180,7 +180,7 @@ export function BerthDetailHeader({ berth }: BerthDetailHeaderProps) {
{berth.area && <p className="text-muted-foreground mt-1">{berth.area}</p>} {berth.area && <p className="text-muted-foreground mt-1">{berth.area}</p>}
</div> </div>
<div className="flex items-center gap-2 shrink-0"> <div className="flex flex-wrap items-center gap-2 shrink-0">
<PermissionGate resource="berths" action="edit"> <PermissionGate resource="berths" action="edit">
<Button variant="outline" size="sm" onClick={() => setStatusOpen(true)}> <Button variant="outline" size="sm" onClick={() => setStatusOpen(true)}>
<RefreshCw className="mr-1.5 h-4 w-4" /> <RefreshCw className="mr-1.5 h-4 w-4" />

2
src/components/clients/client-detail-header.tsx
View File

@@ -115,7 +115,7 @@ export function ClientDetailHeader({ client }: ClientDetailHeaderProps) {
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
{!isArchived && client.clientPortalEnabled !== false && ( {!isArchived && client.clientPortalEnabled !== false && (
<PortalInviteButton <PortalInviteButton
clientId={client.id} clientId={client.id}

2
src/components/companies/company-detail-header.tsx
View File

@@ -100,7 +100,7 @@ export function CompanyDetailHeader({ company }: CompanyDetailHeaderProps) {
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<PermissionGate resource="companies" action="edit"> <PermissionGate resource="companies" action="edit">
<Button variant="outline" size="sm" onClick={() => setEditOpen(true)}> <Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
<Pencil className="mr-1.5 h-3.5 w-3.5" /> <Pencil className="mr-1.5 h-3.5 w-3.5" />

2
src/components/yachts/yacht-detail-header.tsx
View File

@@ -171,7 +171,7 @@ export function YachtDetailHeader({ yacht }: YachtDetailHeaderProps) {
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<Button variant="outline" size="sm" onClick={() => setEditOpen(true)}> <Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
<Pencil className="mr-1.5 h-3.5 w-3.5" /> <Pencil className="mr-1.5 h-3.5 w-3.5" />
Edit Edit