Show full task names on hover in filter dropdown by rupinajay · Pull Request #3008 · triggerdotdev/trigger.dev

rupinajay · 2026-02-05T16:16:17Z

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

Start webapp (pnpm run dev --filter webapp)
Open Runs page and open “Filter by task”
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 · 2026-02-05T16:16:41Z

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

_{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.

changeset-bot · 2026-02-22T20:13:24Z

⚠️ No Changeset found

Latest commit: 952e907

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

devin-ai-integration

Devin Review found 1 potential issue.

View 1 additional finding in Devin Review.

devin-ai-integration · 2026-02-22T20:16:19Z

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

+            <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>


🚩 Tooltip wrapping pattern differs from existing status dropdown convention

The new code wraps SelectItem inside TooltipProvider > Tooltip > TooltipTrigger > div (lines 651-672), while the existing status dropdown at apps/webapp/app/components/runs/v3/RunFilters.tsx:557-568 places TooltipProvider > Tooltip > TooltipTrigger inside SelectItem as children.

The status dropdown pattern is arguably safer because SelectItem remains a direct DOM descendant of SelectList, with no intermediate non-Ariakit wrapper elements. In the new pattern, a <div className="w-full"> sits between SelectList and SelectItem. While this works because Ariakit uses querySelectorAll with role-based selectors (not direct-children checks), adopting the interior-tooltip pattern used by the status dropdown would be more consistent and avoid any risk of future Ariakit updates changing item discovery behavior.

Was this helpful? React with 👍 or 👎 to provide feedback.

Show full task names on hover in filter dropdown

c0de0b3

Merge branch 'main' into fix/2944-task-dropdown

9dbbbed

devin-ai-integration bot reviewed Feb 5, 2026

View reviewed changes

Merge branch 'main' into fix/2944-task-dropdown

952e907

devin-ai-integration bot reviewed Feb 22, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

Show full task names on hover in filter dropdown#3008

Show full task names on hover in filter dropdown#3008
rupinajay wants to merge 3 commits intotriggerdotdev:mainfrom
rupinajay:fix/2944-task-dropdown

rupinajay commented Feb 5, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Feb 5, 2026 •

edited

Loading

Uh oh!

devin-ai-integration bot left a comment

Uh oh!

changeset-bot bot commented Feb 22, 2026

Uh oh!

devin-ai-integration bot left a comment

Uh oh!

devin-ai-integration bot Feb 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Comments

Conversation

rupinajay commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Checklist

Testing

Changelog

Screenshots

Uh oh!

coderabbitai bot commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Uh oh!

devin-ai-integration bot left a comment

Choose a reason for hiding this comment

✅ Devin Review: No Issues Found

Uh oh!

changeset-bot bot commented Feb 22, 2026

⚠️ No Changeset found

Uh oh!

devin-ai-integration bot left a comment

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration bot Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

rupinajay commented Feb 5, 2026 •

edited

Loading

coderabbitai bot commented Feb 5, 2026 •

edited

Loading