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 (
<div className="flex flex-col h-full bg-[#1e2844]">
{/* Logo area */}
<div
className={cn(
'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>
{!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>
<TooltipProvider delayDuration={0}>
<div className="flex flex-col h-full bg-[#1e2844]">
{/* Logo area */}
<div
className={cn(
'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>
)}
</div>
{!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>
{/* Nav */}
<ScrollArea className="flex-1 py-2">
<TooltipProvider delayDuration={0}>
{/* Nav */}
<ScrollArea className="flex-1 py-2">
<nav className="px-2 space-y-4">
{sections.map((section) => {
if (section.adminRequired && !hasAdminAccess) return null;
@@ -266,44 +266,44 @@ function SidebarContent({
);
})}
</nav>
</TooltipProvider>
</ScrollArea>
</ScrollArea>
{/* User footer */}
<div className={cn('border-t border-[#474e66] p-3', collapsed && 'flex justify-center')}>
{collapsed ? (
<Tooltip>
<TooltipTrigger asChild>
<Avatar className="w-8 h-8 cursor-pointer">
{/* User footer */}
<div className={cn('border-t border-[#474e66] p-3', collapsed && 'flex justify-center')}>
{collapsed ? (
<Tooltip>
<TooltipTrigger asChild>
<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} />
<AvatarFallback className="bg-[#3a7bc8] text-white text-xs font-semibold">
U
{(user?.name ?? 'U').slice(0, 1).toUpperCase()}
</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} />
<AvatarFallback className="bg-[#3a7bc8] text-white text-xs font-semibold">
{(user?.name ?? 'U').slice(0, 1).toUpperCase()}
</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 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>
</TooltipProvider>
);
}