From c55af7bead58ea11ac9d0e66d7a287e46cd5b467 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 4 Feb 2026 17:17:18 -0800
Subject: [PATCH] fix(webapp): ask ai button missing tooltip (#2964)

Fixes
- the tooltip not displaying on the AskAI button in the side menu
- incorrect AskAI button heights
- Small UI tweaks
<!-- devin-review-badge-begin -->

---

<a
href="https://app.devin.ai/review/triggerdotdev/trigger.dev/pull/2964">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
<img
src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
alt="Open with Devin">
  </picture>
</a>
<!-- devin-review-badge-end -->

---------

Co-authored-by: Mihai Popescu <mihai.popescu.dev@gmail.com>
---
 apps/webapp/app/components/AskAI.tsx          | 21 ++++++++++---------
 apps/webapp/app/components/Shortcuts.tsx      |  3 ++-
 .../app/components/navigation/SideMenu.tsx    |  5 ++++-
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
index bc55469b8..814d4649c 100644
--- a/apps/webapp/app/components/AskAI.tsx
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -118,30 +118,31 @@ function AskAIProvider({ websiteId, isCollapsed = false }: AskAIProviderProps) {
       <motion.div layout="position" transition={{ duration: 0.2, ease: "easeInOut" }}>
         <TooltipProvider disableHoverableContent>
           <Tooltip>
-            <div className={isCollapsed ? "w-full" : "inline-flex"}>
-              <TooltipTrigger asChild>
+            <TooltipTrigger asChild>
+              <span className={cn("inline-flex h-8", isCollapsed && "w-full")}>
                 <Button
                   variant="small-menu-item"
                   data-action="ask-ai"
-                  shortcut={{ modifiers: ["mod"], key: "/", enabledOnInputElements: true }}
+                  shortcut={{ modifiers: ["mod"], key: "i", enabledOnInputElements: true }}
                   hideShortcutKey
                   data-modal-override-open-class-ask-ai="true"
                   onClick={() => openAskAI()}
-                  className={isCollapsed ? "w-full justify-center" : ""}
+                  fullWidth={isCollapsed}
+                  className={cn("h-full", isCollapsed && "justify-center")}
                 >
                   <AISparkleIcon className="size-5" />
                 </Button>
-              </TooltipTrigger>
-            </div>
+              </span>
+            </TooltipTrigger>
             <TooltipContent
-              side={isCollapsed ? "right" : "top"}
-              sideOffset={isCollapsed ? 8 : 4}
-              className="flex items-center gap-1 py-1.5 pl-2.5 pr-2 text-xs"
+              side="right"
+              sideOffset={8}
+              className="flex items-center gap-2 text-xs"
             >
               Ask AI
               <span className="flex items-center">
                 <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
-                <ShortcutKey shortcut={{ key: "/" }} variant="medium/bright" />
+                <ShortcutKey shortcut={{ key: "i" }} variant="medium/bright" />
               </span>
             </TooltipContent>
           </Tooltip>
diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx
index e3e4d6fe9..a3fcd0749 100644
--- a/apps/webapp/app/components/Shortcuts.tsx
+++ b/apps/webapp/app/components/Shortcuts.tsx
@@ -76,7 +76,8 @@ function ShortcutContent() {
               <ShortcutKey shortcut={{ key: "enter" }} variant="medium/bright" />
             </Shortcut>
             <Shortcut name="Ask AI">
-              <ShortcutKey shortcut={{ modifiers: ["mod"], key: "/" }} variant="medium/bright" />
+              <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
+              <ShortcutKey shortcut={{ key: "i" }} variant="medium/bright" />
             </Shortcut>
             <Shortcut name="Filter">
               <ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 1e7d48cd5..95282f15f 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -993,7 +993,10 @@ function CollapseToggle({
   return (
     <div className="absolute -right-3 top-1/2 z-10 -translate-y-1/2">
       {/* Vertical line to mask the side menu border */}
-      <div className="pointer-events-none absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 bg-background-bright" />
+      <div className={cn(
+        "pointer-events-none absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 transition-colors duration-200",
+        isHovering ? "bg-charcoal-750" : "bg-background-bright"
+      )} />
       <TooltipProvider disableHoverableContent>
         <Tooltip>
           <TooltipTrigger asChild>