ui: move parent/child badges to right side of client header

This commit is contained in:
lorentz 2026-04-09 13:02:32 +00:00
parent 4774eb1932
commit d482c6fe2a

View file

@ -303,7 +303,7 @@ export function ClientDetail({ client, designations, policyGroups = [], allPolic
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-start justify-between"> <div className="flex items-start justify-between gap-4">
<div> <div>
<h1 className="text-3xl font-bold flex items-center gap-3"> <h1 className="text-3xl font-bold flex items-center gap-3">
<Building2 className="h-8 w-8" /> <Building2 className="h-8 w-8" />
@ -329,16 +329,18 @@ export function ClientDetail({ client, designations, policyGroups = [], allPolic
</div> </div>
)} )}
</div> </div>
</div>
{/* Parent / Child badges */} {/* Parent / Child badges — right-aligned */}
<div className="flex flex-wrap gap-2 mt-3"> {(isParent || isChild) && (
<div className="flex flex-wrap gap-2 shrink-0 pt-1">
{isParent && ( {isParent && (
<button <button
onClick={() => setSubsidiariesModalOpen(true)} onClick={() => setSubsidiariesModalOpen(true)}
className="inline-flex items-center gap-1.5 rounded-full border border-violet-500/40 bg-violet-500/10 px-3 py-1 text-xs font-medium text-violet-700 dark:text-violet-400 hover:bg-violet-500/20 transition-colors" className="inline-flex items-center gap-1.5 rounded-full border border-violet-500/40 bg-violet-500/10 px-3 py-1 text-xs font-medium text-violet-700 dark:text-violet-400 hover:bg-violet-500/20 transition-colors"
> >
<GitBranch className="h-3.5 w-3.5" /> <GitBranch className="h-3.5 w-3.5" />
Parent Company · {subsidiaries.length} {subsidiaries.length === 1 ? 'subsidiary' : 'subsidiaries'} Parent · {subsidiaries.length} {subsidiaries.length === 1 ? 'subsidiary' : 'subsidiaries'}
</button> </button>
)} )}
{isChild && ( {isChild && (
@ -351,7 +353,7 @@ export function ClientDetail({ client, designations, policyGroups = [], allPolic
</Link> </Link>
)} )}
</div> </div>
</div> )}
</div> </div>
{/* Subsidiaries modal */} {/* Subsidiaries modal */}