fix(studio): align child sidebar hover states (#45613)

## What kind of change does this PR introduce?

UI polish.

## What is the current behavior?

- A few product sidebar areas render menu rows outside the shared
ProductMenu/Menu.Item styling path, so their hover and selected states
differ from the rest of Studio.
- Database product menu shortcut tooltips are also scoped to the text
label instead of the full hoverable row.

## What is the new behavior?

- Integrations Explore/Installed, Observability, and Reports sidebar
rows now use the shared ProductMenu or Menu.Item pill styling.
- Observability spacing is tightened after the ProductMenu conversion. 
- Product menu shortcut tooltips now wrap the full row trigger, so the
entire Database sidebar row opens the tooltip.



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Enhanced navigation menu components with improved loading and error
state handling across the dashboard.
* Streamlined menu structure and styling consistency for integrations,
reports, and observability sections.
  * Added enhanced tooltip support for navigation items.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/layouts/Integrations/IntegrationsProductMenu.tsx

@@ -8,7 +8,6 @@ import { generateIntegrationsMenu } from './IntegrationsMenu.utils'
 import { useInstalledIntegrations } from '@/components/interfaces/Integrations/Landing/useInstalledIntegrations'
 import AlertError from '@/components/ui/AlertError'
 import { ProductMenu } from '@/components/ui/ProductMenu'
-import { ProductMenuItem } from '@/components/ui/ProductMenu/ProductMenuItem'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import { getPathnameWithoutQuery } from '@/lib/pathname.utils'
@@ -46,29 +45,14 @@ export function IntegrationsProductMenu() {
         menu={generateIntegrationsMenu({ projectRef, flags: { showWrappers } })}
       />
       <Separator />
-      <div className="px-4 py-6 md:px-6">
-        <Menu.Group
-          title={
-            <div className="flex flex-col space-y-2 uppercase font-mono">
-              <span>Installed</span>
-            </div>
-          }
-        />
-        {isLoading && <GenericSkeletonLoader />}
-        {isError && (
-          <AlertError
-            showIcon={false}
-            error={error}
-            subject="Failed to retrieve installed integrations"
-          />
-        )}
-        {isSuccess &&
-          resolvedProjectRef &&
-          integrations.map((integration) => (
-            <ProductMenuItem
-              key={`integrations/${integration.id}`}
-              isActive={page === `integrations/${integration.id}`}
-              item={{
+      {isSuccess && resolvedProjectRef ? (
+        <ProductMenu
+          page={page}
+          menu={[
+            {
+              key: 'installed',
+              title: 'Installed',
+              items: integrations.map((integration) => ({
                 name: integration.name,
                 label: integration.status,
                 key: `integrations/${integration.id}`,
@@ -79,10 +63,31 @@ export function IntegrationsProductMenu() {
                   </div>
                 ),
                 items: [],
-              }}
+              })),
+            },
+          ]}
+        />
+      ) : (
+        <div className="px-4 py-6 md:px-6">
+          <Menu type="pills">
+            <Menu.Group
+              title={
+                <div className="flex flex-col space-y-2 uppercase font-mono">
+                  <span>Installed</span>
+                </div>
+              }
             />
-          ))}
-      </div>
+          </Menu>
+          {isLoading && <GenericSkeletonLoader />}
+          {isError && (
+            <AlertError
+              showIcon={false}
+              error={error}
+              subject="Failed to retrieve installed integrations"
+            />
+          )}
+        </div>
+      )}
     </>
   )
 }

apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx

@@ -1,12 +1,11 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useFlag, useParams } from 'common'
 import { Plus } from 'lucide-react'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { parseAsBoolean, useQueryState } from 'nuqs'
-import { Fragment, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { toast } from 'sonner'
-import { cn, Menu } from 'ui'
+import { Menu } from 'ui'
 import { InnerSideBarEmptyPanel } from 'ui-patterns'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
@@ -17,6 +16,7 @@ import { useSupamonitorStatus } from '@/components/interfaces/QueryPerformance/h
 import { CreateReportModal } from '@/components/interfaces/Reports/CreateReportModal'
 import { UpdateCustomReportModal } from '@/components/interfaces/Reports/UpdateModal'
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import { ProductMenu } from '@/components/ui/ProductMenu'
 import { useContentDeleteMutation } from '@/data/content/content-delete-mutation'
 import { Content, ContentBase, useContentQuery } from '@/data/content/content-query'
 import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
@@ -134,7 +134,7 @@ const ObservabilityMenu = () => {
   })
 
   return (
-    <Menu type="pills" className="mt-6">
+    <div>
       {isLoading ? (
         <div className="px-5 my-4 space-y-2">
           <ShimmeringLoader />
@@ -143,71 +143,62 @@ const ObservabilityMenu = () => {
         </div>
       ) : (
         <div className="flex flex-col gap-y-6">
-          {menuItems.map((item, idx) => (
-            <Fragment key={idx}>
-              <div className="h-px w-full bg-border-overlay first:hidden" />
-              <div>
-                {item.items && item.items.length > 0 ? (
-                  <div className="px-2">
-                    <Menu.Group title={<span className="uppercase font-mono">{item.title}</span>} />
-                    <div key={item.key} className="flex flex-col">
-                      {item.items.map((subItem) => (
-                        <li
-                          key={subItem.key}
-                          className={cn(
-                            'pr-2 mt-1 text-foreground-light group-hover:text-foreground/80 text-sm',
-                            'flex items-center justify-between rounded-md group relative',
-                            subItem.key === pageKey
-                              ? 'bg-surface-300 text-foreground'
-                              : 'hover:text-foreground'
-                          )}
-                        >
-                          <Link
-                            href={subItem.url}
-                            className="grow h-7 flex justify-between items-center pl-3"
-                          >
-                            <span>{subItem.name}</span>
-                          </Link>
-                        </li>
-                      ))}
-                    </div>
-                  </div>
-                ) : null}
-              </div>
-            </Fragment>
-          ))}
+          <ProductMenu
+            page={pageKey}
+            menu={menuItems.map((item) => ({
+              ...item,
+              items: item.items.map((subItem) => ({ ...subItem, items: [] })),
+            }))}
+          />
 
           {IS_PLATFORM && (
-            <Fragment>
+            <>
               <div className="h-px w-full bg-border-overlay" />
               <div className="mx-2">
-                <Menu.Group
-                  title={
-                    <span className="flex w-full items-center justify-between relative h-6">
-                      <span className="uppercase font-mono">Custom Reports</span>
-                      {reportMenuItems.length > 0 && (
-                        <ButtonTooltip
-                          type="default"
-                          size="tiny"
-                          icon={<Plus />}
-                          disabled={!canCreateCustomReport}
-                          className="flex items-center justify-center h-6 w-6 absolute top-0 -right-1"
-                          onClick={() => {
-                            setShowNewReportModal(true)
-                          }}
-                          tooltip={{
-                            content: {
-                              side: 'bottom',
-                              text: !canCreateCustomReport
-                                ? 'You need additional permissions to create custom reports'
-                                : undefined,
-                            },
-                          }}
-                        />
-                      )}
-                    </span>
-                  }
-                />
+                <Menu type="pills">
+                  <Menu.Group
+                    title={
+                      <span className="flex w-full items-center justify-between relative h-6">
+                        <span className="uppercase font-mono">Custom Reports</span>
+                        {reportMenuItems.length > 0 && (
+                          <ButtonTooltip
+                            type="default"
+                            size="tiny"
+                            icon={<Plus />}
+                            disabled={!canCreateCustomReport}
+                            className="flex items-center justify-center h-6 w-6 absolute top-0 -right-1"
+                            onClick={() => {
+                              setShowNewReportModal(true)
+                            }}
+                            tooltip={{
+                              content: {
+                                side: 'bottom',
+                                text: !canCreateCustomReport
+                                  ? 'You need additional permissions to create custom reports'
+                                  : undefined,
+                              },
+                            }}
+                          />
+                        )}
+                      </span>
+                    }
+                  />
+                  {reportMenuItems.length > 0 &&
+                    reportMenuItems.map((item) => (
+                      <ObservabilityMenuItem
+                        key={item.id}
+                        item={item}
+                        pageKey={pageKey}
+                        onSelectEdit={() => {
+                          setSelectedReportToUpdate(item.report)
+                        }}
+                        onSelectDelete={() => {
+                          setSelectedReportToDelete(item.report)
+                          setDeleteModalOpen(true)
+                        }}
+                      />
+                    ))}
+                </Menu>
                 {reportMenuItems.length === 0 ? (
                   <div className="px-2">
                     <InnerSideBarEmptyPanel
@@ -235,26 +226,9 @@ const ObservabilityMenu = () => {
                       }
                     />
                   </div>
-                ) : (
-                  <>
-                    {reportMenuItems.map((item) => (
-                      <ObservabilityMenuItem
-                        key={item.id}
-                        item={item}
-                        pageKey={pageKey}
-                        onSelectEdit={() => {
-                          setSelectedReportToUpdate(item.report)
-                        }}
-                        onSelectDelete={() => {
-                          setSelectedReportToDelete(item.report)
-                          setDeleteModalOpen(true)
-                        }}
-                      />
-                    ))}
-                  </>
-                )}
+                ) : null}
               </div>
-            </Fragment>
+            </>
           )}
 
           <UpdateCustomReportModal
@@ -290,7 +264,7 @@ const ObservabilityMenu = () => {
           />
         </div>
       )}
-    </Menu>
+    </div>
   )
 }
 

apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenuItem.tsx

@@ -3,12 +3,12 @@ import { Edit2, MoreVertical, Trash } from 'lucide-react'
 import Link from 'next/link'
 import {
   Button,
-  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Menu,
 } from 'ui'
 
 import { ContentBase } from '@/data/content/content-query'
@@ -54,58 +54,58 @@ export const ObservabilityMenuItem = ({
     }
   )
 
-  return (
-    <Link
-      className={cn(
-        'pr-2 h-7 pl-3 mt-1 text-foreground-light group-hover:text-foreground/80 text-sm',
-        'flex items-center justify-between rounded-md group relative',
-        item.key === pageKey ? 'bg-surface-300 text-foreground' : 'hover:text-foreground'
-      )}
-      key={item.key + '-menukey'}
-      href={item.url}
-    >
-      <div>{item.name}</div>
+  const menuItem = (
+    <Menu.Item active={item.key === pageKey}>
+      <div className="flex w-full items-center justify-between gap-1">
+        <span className="truncate">{item.name}</span>
 
-      {canUpdateCustomReport && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="text"
-              className="px-1 opacity-50 hover:opacity-100"
-              icon={<MoreVertical size={12} strokeWidth={2} />}
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-              }}
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="w-32 *:gap-x-2">
-            <DropdownMenuItem
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                if (!item.id) return
-                onSelectEdit()
-              }}
-            >
-              <Edit2 size={12} />
-              <div>Rename report</div>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                if (!item.id) return
-                onSelectDelete()
-              }}
-            >
-              <Trash size={12} />
-              <div>Delete report</div>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
+        {canUpdateCustomReport && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type="text"
+                className="px-1 opacity-50 hover:opacity-100"
+                icon={<MoreVertical size={12} strokeWidth={2} />}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                }}
+              />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-32 *:gap-x-2">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  if (!item.id) return
+                  onSelectEdit()
+                }}
+              >
+                <Edit2 size={12} />
+                <div>Rename report</div>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  if (!item.id) return
+                  onSelectDelete()
+                }}
+              >
+                <Trash size={12} />
+                <div>Delete report</div>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    </Menu.Item>
+  )
+
+  return (
+    <Link key={item.key + '-menukey'} href={item.url} className="block">
+      {menuItem}
     </Link>
   )
 }

apps/studio/components/layouts/ProjectIntegrationsLayout.tsx

@@ -8,7 +8,7 @@ import { GenericSkeletonLoader } from 'ui-patterns'
 import { useInstalledIntegrations } from '@/components/interfaces/Integrations/Landing/useInstalledIntegrations'
 import { ProjectLayout } from '@/components/layouts/ProjectLayout'
 import AlertError from '@/components/ui/AlertError'
-import { ProductMenuItem } from '@/components/ui/ProductMenu/ProductMenuItem'
+import { ProductMenu } from '@/components/ui/ProductMenu'
 import { marketplaceCategoriesQueryOptions } from '@/data/marketplace/integration-categories-query'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
 import { withAuth } from '@/hooks/misc/withAuth'
@@ -93,18 +93,21 @@ const IntegrationCategoriesMenu = ({ page }: { page: string }) => {
   ]
 
   return (
-    <div className="px-4 py-6 md:px-6">
-      <Menu.Group title={<span className="uppercase font-mono">Explore</span>} />
+    <>
       {isLoading ? (
-        <GenericSkeletonLoader />
-      ) : (
-        <div>
-          {allCategories.map((item) => (
-            <ProductMenuItem key={item.key} isActive={pageKey === item.key} item={item} />
-          ))}
+        <div className="px-4 py-6 md:px-6">
+          <Menu type="pills">
+            <Menu.Group title={<span className="uppercase font-mono">Explore</span>} />
+          </Menu>
+          <GenericSkeletonLoader />
         </div>
+      ) : (
+        <ProductMenu
+          page={pageKey}
+          menu={[{ key: 'explore', title: 'Explore', items: allCategories }]}
+        />
       )}
-    </div>
+    </>
   )
 }
 
@@ -133,23 +136,28 @@ const InstalledIntegrationsMenu = ({ page }: { page: string }) => {
   }))
 
   return (
-    <div className="px-4 py-6 md:px-6">
-      <Menu.Group title={<span className="uppercase font-mono">Installed</span>} />
-      {isLoading && <GenericSkeletonLoader />}
-      {isError && (
-        <AlertError
-          showIcon={false}
-          error={error}
-          subject="Failed to retrieve installed integrations"
-        />
-      )}
-      {isSuccess && (
-        <div>
-          {installedIntegrationItems.map((item) => (
-            <ProductMenuItem key={item.key} isActive={page === item.key} item={item} />
-          ))}
+    <>
+      {(isLoading || isError) && (
+        <div className="px-4 py-6 md:px-6">
+          <Menu type="pills">
+            <Menu.Group title={<span className="uppercase font-mono">Installed</span>} />
+          </Menu>
+          {isLoading && <GenericSkeletonLoader />}
+          {isError && (
+            <AlertError
+              showIcon={false}
+              error={error}
+              subject="Failed to retrieve installed integrations"
+            />
+          )}
         </div>
       )}
-    </div>
+      {isSuccess && (
+        <ProductMenu
+          page={page}
+          menu={[{ key: 'installed', title: 'Installed', items: installedIntegrationItems }]}
+        />
+      )}
+    </>
   )
 }

apps/studio/components/layouts/ReportsLayout/ReportMenuItem.tsx

@@ -3,12 +3,12 @@ import { ChevronDown, Edit2, Trash } from 'lucide-react'
 import Link from 'next/link'
 import {
   Button,
-  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Menu,
 } from 'ui'
 
 import { ContentBase } from '@/data/content/content-query'
@@ -54,50 +54,58 @@ export const ReportMenuItem = ({
     }
   )
 
-  return (
-    <Link
-      className={cn(
-        'pr-2 h-7 pl-3 mt-1 text-foreground-light group-hover:text-foreground/80 text-sm',
-        'flex items-center justify-between rounded-md group relative',
-        item.key === pageKey ? 'bg-surface-300 text-foreground' : 'hover:bg-surface-200'
-      )}
-      key={item.key + '-menukey'}
-      href={item.url}
-    >
-      <div>{item.name}</div>
+  const menuItem = (
+    <Menu.Item active={item.key === pageKey}>
+      <div className="flex w-full items-center justify-between gap-1">
+        <span className="truncate">{item.name}</span>
 
-      {canUpdateCustomReport && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="text"
-              className="px-1 opacity-50 hover:opacity-100"
-              icon={<ChevronDown size={12} strokeWidth={2} />}
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="w-32 *:gap-x-2">
-            <DropdownMenuItem
-              onClick={() => {
-                if (!item.id) return
-                onSelectEdit()
-              }}
-            >
-              <Edit2 size={12} />
-              <div>Rename report</div>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={() => {
-                if (!item.id) return
-                onSelectDelete()
-              }}
-            >
-              <Trash size={12} />
-              <div>Delete report</div>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
+        {canUpdateCustomReport && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type="text"
+                className="px-1 opacity-50 hover:opacity-100"
+                icon={<ChevronDown size={12} strokeWidth={2} />}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                }}
+              />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-32 *:gap-x-2">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  if (!item.id) return
+                  onSelectEdit()
+                }}
+              >
+                <Edit2 size={12} />
+                <div>Rename report</div>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  if (!item.id) return
+                  onSelectDelete()
+                }}
+              >
+                <Trash size={12} />
+                <div>Delete report</div>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    </Menu.Item>
+  )
+
+  return (
+    <Link key={item.key + '-menukey'} href={item.url} className="block">
+      {menuItem}
     </Link>
   )
 }

apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx

@@ -1,12 +1,11 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { Plus } from 'lucide-react'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { parseAsBoolean, useQueryState } from 'nuqs'
 import { useMemo, useState } from 'react'
 import { toast } from 'sonner'
-import { cn, Menu } from 'ui'
+import { Menu } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
@@ -14,6 +13,7 @@ import { ReportMenuItem } from './ReportMenuItem'
 import { CreateReportModal } from '@/components/interfaces/Reports/CreateReportModal'
 import { UpdateCustomReportModal } from '@/components/interfaces/Reports/UpdateModal'
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import { ProductMenu } from '@/components/ui/ProductMenu'
 import { useContentDeleteMutation } from '@/data/content/content-delete-mutation'
 import { Content, useContentQuery } from '@/data/content/content-query'
 import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
@@ -164,7 +164,7 @@ const ReportsMenu = () => {
   ]
 
   return (
-    <Menu type="pills" className="mt-6">
+    <div className="mt-6">
       {isLoading ? (
         <div className="px-5 my-4 space-y-2">
           <ShimmeringLoader />
@@ -197,7 +197,7 @@ const ReportsMenu = () => {
           </div>
 
           {reportMenuItems.length > 0 ? (
-            <div>
+            <Menu type="pills">
               <Menu.Group
                 title={<span className="uppercase font-mono">Your custom reports</span>}
               />
@@ -215,39 +215,16 @@ const ReportsMenu = () => {
                   }}
                 />
               ))}
-            </div>
+            </Menu>
           ) : null}
 
-          {menuItems.map((item) => (
-            <div key={item.key + '-menu-group'}>
-              {item.items ? (
-                <>
-                  <Menu.Group title={<span className="uppercase font-mono">{item.title}</span>} />
-                  <div key={item.key} className="flex flex-col">
-                    {item.items.map((subItem) => (
-                      <li
-                        key={subItem.key}
-                        className={cn(
-                          'pr-2 mt-1 text-foreground-light group-hover:text-foreground/80 text-sm',
-                          'flex items-center justify-between rounded-md group relative',
-                          subItem.key === pageKey
-                            ? 'bg-surface-300 text-foreground'
-                            : 'hover:bg-surface-200'
-                        )}
-                      >
-                        <Link
-                          href={subItem.url}
-                          className="grow h-7 flex justify-between items-center pl-3"
-                        >
-                          <span>{subItem.name}</span>
-                        </Link>
-                      </li>
-                    ))}
-                  </div>
-                </>
-              ) : null}
-            </div>
-          ))}
+          <ProductMenu
+            page={pageKey}
+            menu={menuItems.map((item) => ({
+              ...item,
+              items: item.items.map((subItem) => ({ ...subItem, items: [] })),
+            }))}
+          />
 
           <UpdateCustomReportModal
             onCancel={() => setSelectedReportToUpdate(undefined)}
@@ -282,7 +259,7 @@ const ReportsMenu = () => {
           />
         </div>
       )}
-    </Menu>
+    </div>
   )
 }
 

apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx

@@ -21,14 +21,6 @@ export const ProductMenuItem = ({
 }: ProductMenuItemProps) => {
   const { name = '', url = '', icon, rightIcon, isExternal, label, disabled, shortcutId } = item
 
-  const labelNode = shortcutId ? (
-    <ShortcutTooltip shortcutId={shortcutId} side="right" delayDuration={1000}>
-      <span className="truncate min-w-0">{name}</span>
-    </ShortcutTooltip>
-  ) : (
-    <span className="truncate flex-1 min-w-0">{name}</span>
-  )
-
   const menuItem = (
     <Menu.Item icon={icon} active={isActive} onClick={onClick}>
       <div className="flex w-full items-center justify-between gap-1">
@@ -38,7 +30,7 @@ export const ProductMenuItem = ({
             shortcutId ? undefined : hoverText ? hoverText : typeof name === 'string' ? name : ''
           }
         >
-          {labelNode}
+          <span className="truncate flex-1 min-w-0">{name}</span>
           {label !== undefined && (
             <Badge
               className="shrink-0"
@@ -59,20 +51,36 @@ export const ProductMenuItem = ({
 
   if (url) {
     if (isExternal) {
-      return (
+      const externalLink = (
         <Button asChild block className="justify-start!" type="text" size="small" icon={icon}>
           <Link href={url} target="_blank" rel="noreferrer">
             {name}
           </Link>
         </Button>
       )
+
+      return shortcutId ? (
+        <ShortcutTooltip shortcutId={shortcutId} side="right" delayDuration={1000}>
+          {externalLink}
+        </ShortcutTooltip>
+      ) : (
+        externalLink
+      )
     }
 
-    return (
+    const link = (
       <Link href={url} className="block" target={target} onClick={onClick}>
         {menuItem}
       </Link>
     )
+
+    return shortcutId ? (
+      <ShortcutTooltip shortcutId={shortcutId} side="right" delayDuration={1000}>
+        {link}
+      </ShortcutTooltip>
+    ) : (
+      link
+    )
   }
 
   return menuItem