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

fix(layout): hoist TooltipProvider to wrap full sidebar tree

Browse Source 
The collapsed-state user-footer renders a Tooltip that was outside the
TooltipProvider — the provider only wrapped the nav. Once the sidebar
toggled to collapsed, the footer Tooltip threw "Tooltip must be used
within TooltipProvider", surfacing as console errors in exhaustive
click-through tests.

Move TooltipProvider up one level so every Tooltip in the sidebar tree
(nav items + user footer) is covered.

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

102
src/components/layout/sidebar.tsx
View File

@@ -199,28 +199,28 @@ function SidebarContent({
} }
return ( return (
<div className="flex flex-col h-full bg-[#1e2844]"> <TooltipProvider delayDuration={0}>
{/* Logo area */} <div className="flex flex-col h-full bg-[#1e2844]">
<div {/* Logo area */}
className={cn( <div
'flex items-center gap-3 px-4 py-5 border-b border-[#474e66]', className={cn(
collapsed && 'justify-center px-2', 'flex items-center gap-3 px-4 py-5 border-b border-[#474e66]',
)} collapsed && 'justify-center px-2',
> )}
<div className="shrink-0 w-8 h-8 rounded-md bg-[#3a7bc8] flex items-center justify-center"> >
<span className="text-white font-bold text-sm">PN</span> <div className="shrink-0 w-8 h-8 rounded-md bg-[#3a7bc8] flex items-center justify-center">
</div> <span className="text-white font-bold text-sm">PN</span>
{!collapsed && (
<div className="min-w-0">
<p className="text-white font-semibold text-sm leading-tight truncate">Port Nimara</p>
<p className="text-[#83aab1] text-xs truncate">Marina CRM</p>
</div> </div>
)} {!collapsed && (
</div> <div className="min-w-0">
<p className="text-white font-semibold text-sm leading-tight truncate">Port Nimara</p>
<p className="text-[#83aab1] text-xs truncate">Marina CRM</p>
</div>
)}
</div>
{/* Nav */} {/* Nav */}
<ScrollArea className="flex-1 py-2"> <ScrollArea className="flex-1 py-2">
<TooltipProvider delayDuration={0}>
<nav className="px-2 space-y-4"> <nav className="px-2 space-y-4">
{sections.map((section) => { {sections.map((section) => {
if (section.adminRequired && !hasAdminAccess) return null; if (section.adminRequired && !hasAdminAccess) return null;
@@ -266,44 +266,44 @@ function SidebarContent({
); );
})} })}
</nav> </nav>
</TooltipProvider> </ScrollArea>
</ScrollArea>
{/* User footer */} {/* User footer */}
<div className={cn('border-t border-[#474e66] p-3', collapsed && 'flex justify-center')}> <div className={cn('border-t border-[#474e66] p-3', collapsed && 'flex justify-center')}>
{collapsed ? ( {collapsed ? (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Avatar className="w-8 h-8 cursor-pointer"> <Avatar className="w-8 h-8 cursor-pointer">
<AvatarImage src={undefined} />
<AvatarFallback className="bg-[#3a7bc8] text-white text-xs font-semibold">
U
</AvatarFallback>
</Avatar>
</TooltipTrigger>
<TooltipContent side="right">User Profile</TooltipContent>
</Tooltip>
) : (
<div className="flex items-center gap-3">
<Avatar className="w-8 h-8 shrink-0">
<AvatarImage src={undefined} /> <AvatarImage src={undefined} />
<AvatarFallback className="bg-[#3a7bc8] text-white text-xs font-semibold"> <AvatarFallback className="bg-[#3a7bc8] text-white text-xs font-semibold">
U {(user?.name ?? 'U').slice(0, 1).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
</TooltipTrigger> <div className="flex-1 min-w-0">
<TooltipContent side="right">User Profile</TooltipContent> <p className="text-white text-sm font-medium truncate">{user?.name ?? 'User'}</p>
</Tooltip> <Badge
) : ( variant="outline"
<div className="flex items-center gap-3"> className="text-[10px] px-1.5 py-0 text-[#83aab1] border-[#474e66] mt-0.5"
<Avatar className="w-8 h-8 shrink-0"> >
<AvatarImage src={undefined} /> {portRoles[0]?.role?.name ?? 'Staff'}
<AvatarFallback className="bg-[#3a7bc8] text-white text-xs font-semibold"> </Badge>
{(user?.name ?? 'U').slice(0, 1).toUpperCase()} </div>
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<p className="text-white text-sm font-medium truncate">{user?.name ?? 'User'}</p>
<Badge
variant="outline"
className="text-[10px] px-1.5 py-0 text-[#83aab1] border-[#474e66] mt-0.5"
>
{portRoles[0]?.role?.name ?? 'Staff'}
</Badge>
</div> </div>
</div> )}
)} </div>
</div> </div>
</div> </TooltipProvider>
); );
} }