Show full task names on hover in filter dropdown

[rupinajay]

Closes #2944

✅ Checklist

• I have followed every step in the contributing guide
• The PR title follows the convention.
• I ran and tested the code works

---

Testing

1. Start webapp (pnpm run dev --filter webapp)
2. Open Runs page and open “Filter by task”
3. Hover any task row and confirm full slug appears

---

Changelog

• Show full task slug on hover for task filter dropdown items.

---

Screenshots

• Before:

• After:

---

[coderabbitai]

Walkthrough

The RunFilters.tsx component was modified to enhance the TasksDropdown rendering. SelectItem elements within the dropdown were wrapped with Tooltip components (TooltipProvider, Tooltip, TooltipTrigger, and TooltipContent) to display the full slug text on hover. The underlying control flow and functionality remain unchanged; only the DOM structure and visual presentation were augmented with tooltip UI elements.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely describes the main change: adding hover tooltips to show full task names in the filter dropdown.
Description check	✅ Passed	The PR description includes all required sections from the template: issue closure, completed checklist, testing steps, changelog, and screenshots.
Linked Issues check	✅ Passed	The PR successfully implements the primary objective from issue #2944 by adding hover tooltips that show full task names in the filter dropdown, addressing the truncation problem.
Out of Scope Changes check	✅ Passed	The changes are focused solely on the TasksDropdown component in RunFilters.tsx, wrapping dropdown items with tooltip components to display full task names on hover.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

🧹 Recent nitpick comments

apps/webapp/app/components/runs/v3/RunFilters.tsx (1)

651-672: Implementation achieves the PR objective correctly.

The tooltip implementation correctly displays the full task slug on hover, addressing the truncation issue. The asChild pattern with a div wrapper ensures tooltip event handlers are properly attached.

One minor observation: this pattern differs from StatusDropdown (lines 557-568), which places the tooltip inside the SelectItem rather than wrapping it. Both approaches work, but if you want pattern consistency across dropdowns, consider aligning with the existing approach:

♻️ Optional: Align with StatusDropdown pattern

-            <TooltipProvider key={`${item.triggerSource}-${item.slug}`}>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div className="w-full">
-                    <SelectItem
-                      value={item.slug}
-                      icon={
-                        <TaskTriggerSourceIcon
-                          source={item.triggerSource}
-                          className="size-4 flex-none"
-                        />
-                      }
-                    >
-                      <MiddleTruncate text={item.slug} />
-                    </SelectItem>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent side="right" sideOffset={8}>
-                  <Paragraph variant="extra-small">{item.slug}</Paragraph>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+            <SelectItem
+              key={`${item.triggerSource}-${item.slug}`}
+              value={item.slug}
+              icon={
+                <TaskTriggerSourceIcon
+                  source={item.triggerSource}
+                  className="size-4 flex-none"
+                />
+              }
+            >
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger className="flex w-full">
+                    <MiddleTruncate text={item.slug} />
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={8}>
+                    <Paragraph variant="extra-small">{item.slug}</Paragraph>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </SelectItem>

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3bb9aac and 9dbbbed.

📒 Files selected for processing (1)

• apps/webapp/app/components/runs/v3/RunFilters.tsx

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx}: Use types over interfaces for TypeScript
Avoid using enums; prefer string unions or const objects instead

**/*.{ts,tsx}: Always import tasks from @trigger.dev/sdk, never use @trigger.dev/sdk/v3 or deprecated client.defineJob pattern
Every Trigger.dev task must be exported and have a unique id property with no timeouts in the run function

Files:

• apps/webapp/app/components/runs/v3/RunFilters.tsx

{packages/core,apps/webapp}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use zod for validation in packages/core and apps/webapp

Files:

• apps/webapp/app/components/runs/v3/RunFilters.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use function declarations instead of default exports

Import from @trigger.dev/core using subpaths only, never import from root

Files:

• apps/webapp/app/components/runs/v3/RunFilters.tsx

apps/webapp/app/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)

Access all environment variables through the env export of env.server.ts instead of directly accessing process.env in the Trigger.dev webapp

Files:

• apps/webapp/app/components/runs/v3/RunFilters.tsx

apps/webapp/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)

apps/webapp/**/*.{ts,tsx}: When importing from @trigger.dev/core in the webapp, use subpath exports from the package.json instead of importing from the root path
Follow the Remix 2.1.0 and Express server conventions when updating the main trigger.dev webapp

Access environment variables via env export from apps/webapp/app/env.server.ts, never use process.env directly

Files:

• apps/webapp/app/components/runs/v3/RunFilters.tsx

**/*.{js,ts,jsx,tsx,json,md,yaml,yml}

📄 CodeRabbit inference engine (AGENTS.md)

Format code using Prettier before committing

Files:

• apps/webapp/app/components/runs/v3/RunFilters.tsx

🧠 Learnings (4)

📓 Common learnings

Learnt from: samejr
Repo: triggerdotdev/trigger.dev PR: 2964
File: apps/webapp/app/components/AskAI.tsx:121-141
Timestamp: 2026-01-28T16:57:47.620Z
Learning: In the trigger.dev webapp codebase, the Button component (apps/webapp/app/components/primitives/Buttons) does not spread unknown props to the underlying <button> element—it only passes specific props (type, disabled, onClick, name, value, ref, form, autoFocus). When using Radix UI's TooltipTrigger with asChild, a span wrapper around the Button is necessary to receive Radix props (aria-describedby, onPointerEnter, onPointerLeave, data-state) while the Button handles its own behavior. Directly making the Button the child of TooltipTrigger with asChild will break accessibility and tooltip functionality.

📚 Learning: 2025-11-27T16:27:35.304Z

Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: .cursor/rules/writing-tasks.mdc:0-0
Timestamp: 2025-11-27T16:27:35.304Z
Learning: Applies to **/trigger/**/*.{ts,tsx,js,jsx} : Attach metadata to task runs using the metadata option when triggering, and access/update it inside runs using metadata functions

Applied to files:

• apps/webapp/app/components/runs/v3/RunFilters.tsx

📚 Learning: 2025-11-27T16:27:35.304Z

Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: .cursor/rules/writing-tasks.mdc:0-0
Timestamp: 2025-11-27T16:27:35.304Z
Learning: Applies to **/trigger/**/*.{ts,tsx,js,jsx} : Subscribe to run updates using `runs.subscribeToRun()` for realtime monitoring of task execution

Applied to files:

• apps/webapp/app/components/runs/v3/RunFilters.tsx

📚 Learning: 2026-01-15T11:50:06.067Z

Learnt from: CR
Repo: triggerdotdev/trigger.dev PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-15T11:50:06.067Z
Learning: Applies to **/*.{ts,tsx} : Every Trigger.dev task must be exported and have a unique `id` property with no timeouts in the run function

Applied to files:

• apps/webapp/app/components/runs/v3/RunFilters.tsx

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 1 additional finding.