fix(web): prevent file header overflow

[brendan-kellam]

Summary

• constrain the browse file breadcrumb header to the space remaining beside the external code-host link
• prevent long source paths from pushing the right side of the header outside the code preview panel

Reproduction

Open https://app.sourcebot.dev/browse/github.com/alex000kim/claude-code@refs/heads/main/-/blob/src%2Fcomponents%2Fpermissions%2FPowerShellPermissionRequest%2FPowerShellPermissionRequest.tsx?highlightRange=71%2C77 with the file tree at its default width. Before this fix, the long breadcrumb can push the Open in GitHub link past the right edge; resizing the file tree triggers a remeasurement that masks the overflow.

Testing

• yarn workspace @sourcebot/web lint (passes with four pre-existing warnings)
• yarn workspace @sourcebot/web test --run (88 files, 1,084 tests passed)

---

Note

Low Risk
UI-only flexbox and breadcrumb measurement changes in the browse header with no auth, API, or data handling impact.

Overview
Fixes browse code preview headers so long paths no longer push the Open in … link past the panel edge.

PathHeader now measures breadcrumb segments up front (via useLayoutEffect), reserves space for the ellipsis control and file icon, and keeps the largest path suffix that fits; the last segment truncates with min-w-0, and the breadcrumb row stays invisible until measurement finishes to avoid layout flash.

CodePreviewPanelClient wraps the header in min-w-0 flex-1, shows a skeleton for the external link while file source loads, and keeps the link flex-shrink-0.

Supporting flex fixes: min-w-0 on the app main column (layout.tsx) and file tree ScrollArea (pureFileTreePanel). Changelog entry added under Fixed.

^{Reviewed by Cursor Bugbot for commit 62761a4. Bugbot is set up for automated code reviews on this repo. Configure here.}

Summary by CodeRabbit

• Bug Fixes
  • Prevented long file paths from overflowing the browse file header.
  • Improved the file preview header layout to better constrain and display lengthy paths.
  • Refined breadcrumb rendering to measure available space more accurately and collapse segments cleanly when needed.
• Chores
  • Updated layout and tree panel styling to ensure flex content properly constrains width.

[coderabbitai]

Walkthrough

The browse file header now constrains PathHeader within flexible containers, measures breadcrumb widths before rendering, collapses long paths from the prefix, and prevents related layout containers from expanding beyond available space. The unreleased changelog records the fix.

Changes

Browse header overflow

Layer / File(s)	Summary
Breadcrumb measurement and collapse packages/web/src/app/(app)/components/pathHeader.tsx	PathHeader measures available and segment widths with an isomorphic layout effect, then calculates the visible breadcrumb suffix while accounting for separators and fixed controls.
Breadcrumb constrained rendering packages/web/src/app/(app)/components/pathHeader.tsx	The breadcrumb row remains invisible until measured, and segment, link, and copy-control classes apply minimum-width, truncation, and shrink behavior.
Header and browse layout constraints packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanelClient.tsx, packages/web/src/app/(app)/browse/components/pureFileTreePanel.tsx, packages/web/src/app/(app)/layout.tsx, CHANGELOG.md	The code preview header wraps PathHeader in min-w-0 flex-1, browse flex containers use min-w-0, the file URL branch explicitly returns null when absent, and the changelog documents the fix.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• sourcebot-dev/sourcebot#1426: Updated the related client-side code preview header implementation.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly states the primary fix and matches the file header overflow changes.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch brendan/fix-browse-file-header-overflow

---

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