feat(webapp): Add MiddleTruncate component for long task names #2946
Conversation
|
WalkthroughAdds a new React component Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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. Comment |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
Review CompleteYour review story is ready! Comment !reviewfast on this PR to re-generate the story. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/webapp/app/components/primitives/MiddleTruncate.tsx`:
- Around line 85-103: After enforcing the minimum characters (minChars) for
startChars/endChars, re-measure against the available targetWidth (or the
measuring logic used in the fitting loop) and if the enforced minimums cause the
rendered width to exceed targetWidth, revert to the previous last-fit values
(the values computed before forcing minChars) or fall back to a safe
ellipsis-only display; update setDisplayText and setIsTruncated accordingly.
Locate the logic that enforces minChars and the variables startChars, endChars,
targetWidth (or the measuring routine) and ensure you preserve the last-fit
start/end counts before overwriting them so you can restore them when the
post-min re-check fails.
🧹 Nitpick comments (1)
apps/webapp/app/components/primitives/MiddleTruncate.tsx (1)
5-8: Use a type alias for props to match TS style.
MiddleTruncatePropsis declared as an interface, but the repo guideline for*.ts/tsxpreferstypealiases. Please confirm this aligns with the current TypeScript style rules and consider switching.♻️ Proposed change
-interface MiddleTruncateProps { - text: string; - className?: string; -} +type MiddleTruncateProps = { + text: string; + className?: string; +};As per coding guidelines, prefer types over interfaces.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/webapp/app/components/primitives/MiddleTruncate.tsxapps/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/v3or deprecatedclient.defineJobpattern
Every Trigger.dev task must be exported and have a uniqueidproperty with no timeouts in the run function
Files:
apps/webapp/app/components/primitives/MiddleTruncate.tsxapps/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/primitives/MiddleTruncate.tsxapps/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/coreusing subpaths only, never import from root
Files:
apps/webapp/app/components/primitives/MiddleTruncate.tsxapps/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
envexport ofenv.server.tsinstead of directly accessingprocess.envin the Trigger.dev webapp
Files:
apps/webapp/app/components/primitives/MiddleTruncate.tsxapps/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/corein 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 webappAccess environment variables via
envexport fromapps/webapp/app/env.server.ts, never useprocess.envdirectly
Files:
apps/webapp/app/components/primitives/MiddleTruncate.tsxapps/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/primitives/MiddleTruncate.tsxapps/webapp/app/components/runs/v3/RunFilters.tsx
🧠 Learnings (4)
📚 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} : Export tasks with unique IDs within the project to enable proper task discovery and execution
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} : 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} : Use `trigger.dev/sdk/v3` for all imports in Trigger.dev tasks
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} : Always import tasks from `trigger.dev/sdk`, never use `trigger.dev/sdk/v3` or deprecated `client.defineJob` pattern
Applied to files:
apps/webapp/app/components/runs/v3/RunFilters.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (22)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (3, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (2, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (1, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (1, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (8, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (5, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (7, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (7, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (6, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (6, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (2, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (4, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (3, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (5, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (4, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (8, 8)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
- GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - npm)
- GitHub Check: units / packages / 🧪 Unit Tests: Packages (1, 1)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
- GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - pnpm)
- GitHub Check: typecheck / typecheck
🔇 Additional comments (2)
apps/webapp/app/components/runs/v3/RunFilters.tsx (2)
34-34: MiddleTruncate integration looks solid.Wiring the new component into task slug rendering should keep long hierarchical names readable while preserving full values via tooltip.
Also applies to: 658-658
638-638: Popover width bump aligns with longer slugs.The
min(360px, …)cap is a sensible companion to the new truncation behavior.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/webapp/app/components/primitives/MiddleTruncate.tsx`:
- Around line 119-135: Wrap usage of ResizeObserver with a presence check to
avoid runtime errors when it is undefined: inside the useLayoutEffect that calls
calculateTruncation() (and where ResizeObserver is constructed) guard
creation/observation with a check like typeof ResizeObserver !== "undefined"
before new ResizeObserver(...) and observing container.parentElement, and skip
or fallback when unavailable; apply the same guard in the EnvironmentLabel
component at the ResizeObserver usage (around the observer
creation/observe/disconnect logic) so both calculateTruncation/useLayoutEffect
in MiddleTruncate and the ResizeObserver block in EnvironmentLabel only run when
ResizeObserver exists.
🧹 Nitpick comments (1)
apps/webapp/app/components/primitives/MiddleTruncate.tsx (1)
61-83: Clarify the “binary search” comment.
The loop is incremental/alternating rather than a binary search, so the comment is misleading.📝 Suggested wording fix
- // Binary search for optimal character counts + // Incrementally find the optimal character counts
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/webapp/app/components/primitives/MiddleTruncate.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/v3or deprecatedclient.defineJobpattern
Every Trigger.dev task must be exported and have a uniqueidproperty with no timeouts in the run function
Files:
apps/webapp/app/components/primitives/MiddleTruncate.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/primitives/MiddleTruncate.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use function declarations instead of default exports
Import from
@trigger.dev/coreusing subpaths only, never import from root
Files:
apps/webapp/app/components/primitives/MiddleTruncate.tsx
apps/webapp/app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
Access all environment variables through the
envexport ofenv.server.tsinstead of directly accessingprocess.envin the Trigger.dev webapp
Files:
apps/webapp/app/components/primitives/MiddleTruncate.tsx
apps/webapp/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
apps/webapp/**/*.{ts,tsx}: When importing from@trigger.dev/corein 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 webappAccess environment variables via
envexport fromapps/webapp/app/env.server.ts, never useprocess.envdirectly
Files:
apps/webapp/app/components/primitives/MiddleTruncate.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/primitives/MiddleTruncate.tsx
🧬 Code graph analysis (1)
apps/webapp/app/components/primitives/MiddleTruncate.tsx (2)
apps/webapp/app/utils/cn.ts (1)
cn(77-79)apps/webapp/app/components/primitives/Tooltip.tsx (1)
SimpleTooltip(141-141)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (21)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (7, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (1, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (5, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (2, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (8, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (4, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (8, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (3, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (7, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (1, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (4, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (3, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (6, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (5, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (2, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (6, 8)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
- GitHub Check: units / packages / 🧪 Unit Tests: Packages (1, 1)
- GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - pnpm)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
- GitHub Check: typecheck / typecheck
🔇 Additional comments (2)
apps/webapp/app/components/primitives/MiddleTruncate.tsx (2)
1-8: Props typing and imports look good.
Type alias aligns with TS style guidance, and the imports are clean.
137-163: Render + tooltip integration looks solid.
Hidden measurement span and tooltip-on-truncate behavior are clean and readable.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
When task names are too long to fit in the dropdown, truncate in the middle (showing beginning...end) instead of just cutting off the end. This helps users identify tasks with colon-namespaced names where the unique part may be at the end. Show full name in tooltip on hover.
Increased the max-width of the TasksDropdown SelectPopover from 240px to 360px to provide more space for viewing task names, especially those with colon-namespaced naming conventions.
…cated Changed the SelectPopover min-width from 0 to 360px to ensure the dropdown always has adequate space for displaying task names with middle truncation. This prevents the dropdown from becoming too narrow when long task names are present. Slack thread: https://triggerdotdev.slack.com/archives/C032WA2S43F/p1769451219774789?thread_ts=1769436524.157219&cid=C032WA2S43F https://claude.ai/code/session_01KrFXrmK7jz9sWTcS8pMtXL
… is truncated" This reverts commit c769a57.
…runcated When text is truncated, apply min-w-[360px] to the MiddleTruncate component to ensure the truncated text has adequate display space. This matches the max-width of the dropdown popup and prevents the component from becoming too narrow. Slack thread: https://triggerdotdev.slack.com/archives/C032WA2S43F/p1769451219774789?thread_ts=1769436524.157219&cid=C032WA2S43F https://claude.ai/code/session_01KrFXrmK7jz9sWTcS8pMtXL
- Changed interface to type alias to match repo TS style conventions - Added re-measurement after enforcing minChars to prevent overflow in narrow containers - Changed min-w-[360px] to min-w-full to prevent layout overflow when popover width is constrained on narrow viewports https://claude.ai/code/session_01KrFXrmK7jz9sWTcS8pMtXL
- Fixed misleading comment: "Binary search" → "Incrementally find" - Added ResizeObserver guard for jsdom/older browser compatibility https://claude.ai/code/session_01KrFXrmK7jz9sWTcS8pMtXL
Increase the minimum width for the run slug display inside the RunFilters select dropdown so long slugs are less likely to be truncated prematurely. Change MiddleTruncate to include a min-w-[360px] class on the SelectItem content to provide more room for slugs and improve readability in the runs filter UI.
0ski
force-pushed
the
claude/slack-fix-branch-name-truncation-9PMl9
branch
from
a0e401c to
3df5767
Compare
…ible min-w-[360px] class allows to keep reasonable spacing when there is only one item on the list
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/webapp/app/components/runs/v3/RunFilters.tsx (1)
638-659: Fixed 360px min‑width can overflow on narrow viewports.
Line 658 forcesmin-w-[360px]while the popover max width ismin(360px, var(--popover-available-width)). When available width is smaller, this can cause horizontal overflow and preventMiddleTruncatefrom measuring the real width.🛠️ Suggested tweak
- <MiddleTruncate text={item.slug} className="min-w-[360px]"/> + <MiddleTruncate text={item.slug} className="min-w-0" />
🤖 Fix all issues with AI agents
In `@apps/webapp/app/components/primitives/MiddleTruncate.tsx`:
- Around line 49-54: The current truncation math double‑counts the ellipsis: you
measure the ellipsis into `measure.textContent` and compute `ellipsisWidth`, but
then subtract `ellipsisWidth` again when computing `targetWidth` (`const
targetWidth = availableWidth - ellipsisWidth - 4`), causing over‑truncation;
update the calculation to use the available width already accounting for the
ellipsis measurement (remove the extra `- ellipsisWidth`) or otherwise ensure
`targetWidth` aligns with how `measure` is used so `ellipsisWidth` is not
subtracted twice—adjust the `targetWidth`, `ellipsis`, `measure`, and
`ellipsisWidth` usage accordingly.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/webapp/app/components/primitives/MiddleTruncate.tsxapps/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/v3or deprecatedclient.defineJobpattern
Every Trigger.dev task must be exported and have a uniqueidproperty with no timeouts in the run function
Files:
apps/webapp/app/components/runs/v3/RunFilters.tsxapps/webapp/app/components/primitives/MiddleTruncate.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.tsxapps/webapp/app/components/primitives/MiddleTruncate.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use function declarations instead of default exports
Import from
@trigger.dev/coreusing subpaths only, never import from root
Files:
apps/webapp/app/components/runs/v3/RunFilters.tsxapps/webapp/app/components/primitives/MiddleTruncate.tsx
apps/webapp/app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
Access all environment variables through the
envexport ofenv.server.tsinstead of directly accessingprocess.envin the Trigger.dev webapp
Files:
apps/webapp/app/components/runs/v3/RunFilters.tsxapps/webapp/app/components/primitives/MiddleTruncate.tsx
apps/webapp/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
apps/webapp/**/*.{ts,tsx}: When importing from@trigger.dev/corein 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 webappAccess environment variables via
envexport fromapps/webapp/app/env.server.ts, never useprocess.envdirectly
Files:
apps/webapp/app/components/runs/v3/RunFilters.tsxapps/webapp/app/components/primitives/MiddleTruncate.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.tsxapps/webapp/app/components/primitives/MiddleTruncate.tsx
🧠 Learnings (8)
📚 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} : Export tasks with unique IDs within the project to enable proper task discovery and execution
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} : 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: 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
📚 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} : Use `trigger.dev/sdk/v3` for all imports in Trigger.dev tasks
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} : Always import tasks from `trigger.dev/sdk`, never use `trigger.dev/sdk/v3` or deprecated `client.defineJob` pattern
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} : Use `schedules.task()` for scheduled/cron tasks instead of regular `task()`
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} : Limit task duration using the `maxDuration` property (in seconds)
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
🧬 Code graph analysis (1)
apps/webapp/app/components/runs/v3/RunFilters.tsx (1)
apps/webapp/app/components/primitives/MiddleTruncate.tsx (1)
MiddleTruncate(16-168)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (21)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (2, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (3, 8)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (8, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (7, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (6, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (4, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (5, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (1, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (7, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (1, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (8, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (4, 8)
- GitHub Check: units / internal / 🧪 Unit Tests: Internal (5, 8)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (6, 8)
- GitHub Check: typecheck / typecheck
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (2, 8)
- GitHub Check: units / packages / 🧪 Unit Tests: Packages (1, 1)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (3, 8)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
- GitHub Check: Analyze (javascript-typescript)
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
0ski
changed the title
Tested it, and the min-w-360 is needed to keep the nice UX, I couldn't overflow it |
Closes #
✅ Checklist
Testing
Tested the MiddleTruncate component in the TasksDropdown by:
Changelog
Added a new
MiddleTruncateprimitive component that intelligently truncates text in the middle while preserving the beginning and end portions. This is particularly useful for long hierarchical identifiers like task slugs.Key features:
Changes:
MiddleTruncate.tsxcomponent with binary search algorithm for optimal character distributionScreenshots
💯
Tasks.mp4