fix(streams): fixed broken wrapping in streams inspector

[ericallam]

No description provided.

[changeset-bot]

⚠️ No Changeset found

Latest commit: e27ee00

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

[coderabbitai]

Walkthrough

This pull request modifies a single stream rendering route file to improve scrolling and layout behavior. Changes include implementing realtime auto-scroll using a scrollRef that preserves horizontal scroll position while scrolling to the bottom, enabling horizontal overflow support on the scroll container, adjusting virtual list container width from fixed to minimum sizing, and refining stream line rendering by removing explicit widths, adding timestamp column padding, and changing content area text wrapping from break-all to nowrap behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25 minutes

• Scroll position preservation logic: Verify that the scrollLeft save-and-restore pattern correctly maintains horizontal scroll position during vertical auto-scroll operations across different scenarios and edge cases.
• Virtual list sizing behavior: Confirm that the minWidth 100% change produces expected layout behavior compared to the previous fixed width, especially with dynamic content or window resizing.
• Text wrapping behavior change: Assess the impact of switching from break-all to whitespace-nowrap on stream line display, including line length handling and readability implications.
• Cross-browser scroll compatibility: Ensure scroll behavior and ref-based positioning work consistently across supported browsers.

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description is entirely missing. The template requires sections for Testing, Changelog, and Screenshots, along with a checklist and issue reference.	Add a complete PR description following the template, including issue reference, checklist items, testing steps, changelog summary, and any relevant screenshots.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the fix for broken text wrapping in the streams inspector, accurately reflecting the main change in the changeset.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch ea-branch-96

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f7cb637 and e27ee00.

⛔ Files ignored due to path filters (3)

• references/realtime-streams/src/app/actions.ts is excluded by !references/**
• references/realtime-streams/src/app/runs/[runId]/page.tsx is excluded by !references/**
• references/realtime-streams/src/components/streams.tsx is excluded by !references/**

📒 Files selected for processing (1)

• apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx (5 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

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

**/*.{ts,tsx}: Always prefer using isomorphic code like fetch, ReadableStream, etc. instead of Node.js specific code
For TypeScript, we usually use types over interfaces
Avoid enums
No default exports, use function declarations

Files:

• apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx

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

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

We use zod a lot in packages/core and in the webapp

Files:

• apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx

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

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

When importing from @trigger.dev/core in the webapp, never import the root package path; always use one of the documented subpath exports from @trigger.dev/core’s package.json

Files:

• apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.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). (23)

• GitHub Check: units / internal / 🧪 Unit Tests: Internal (3, 8)
• GitHub Check: units / internal / 🧪 Unit Tests: Internal (4, 8)
• GitHub Check: units / internal / 🧪 Unit Tests: Internal (8, 8)
• GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (6, 8)
• GitHub Check: units / internal / 🧪 Unit Tests: Internal (7, 8)
• GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (3, 8)
• GitHub Check: units / internal / 🧪 Unit Tests: Internal (5, 8)
• GitHub Check: units / internal / 🧪 Unit Tests: Internal (2, 8)
• GitHub Check: units / internal / 🧪 Unit Tests: Internal (1, 8)
• GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (7, 8)
• GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (4, 8)
• 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 (5, 8)
• GitHub Check: units / internal / 🧪 Unit Tests: Internal (6, 8)
• GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (8, 8)
• GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (1, 8)
• GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - pnpm)
• GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
• GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
• GitHub Check: typecheck / typecheck
• GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - npm)
• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (4)

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx (4)

202-207: LGTM: Horizontal scroll preservation implemented correctly.

The auto-scroll logic now properly preserves the horizontal scroll position while scrolling vertically to the bottom. This prevents jarring horizontal position resets when new chunks arrive.

---

346-346: LGTM: Horizontal overflow enabled.

Adding overflow-x-auto is essential for the new horizontal scrolling behavior and works correctly with the content styling changes.

---

379-379: LGTM: Correct width handling for horizontal overflow.

Changing from fixed width: "100%" to minWidth: "100%" allows the virtual container to expand beyond the viewport width when content is wider, enabling proper horizontal scrolling.

---

458-479: LGTM: Stream line rendering changes correctly implement horizontal overflow.

The changes work together to fix the wrapping behavior:

• Removed explicit width constraints to allow content expansion
• Added spacing refinement with pl-1 on the timestamp
• Changed from break-all (which was breaking words mid-character) to whitespace-nowrap (which preserves content integrity and enables horizontal scrolling)

These changes align with the PR objective and provide better UX for viewing stream data.

---

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.}