From cda44e721bb2e9b4310a1780d11c8a83fbcc332a Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Tue, 28 Apr 2026 05:08:01 +0200
Subject: [PATCH] fix(layout): hoist TooltipProvider to wrap full sidebar tree
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/components/layout/sidebar.tsx | 102 +++++++++++++++---------------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index 15ffec6..cd08190 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -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>
   );
 }