fix(web): prevent pull request metadata overlap

[MatthewFeroz]

Branch point 8f525af → current e90e9c7

Problem

Opening a pull request detail panel narrows the list. Row metadata, including the “matched in the description” hint, could paint underneath the fixed timestamp and diff-stat column. In the condensed header, an active search could also squeeze the breadcrumb until the Open filter painted underneath the search field.

Fix

Keep each row in a two-line grid: the title and timestamp share the first row, while metadata and reported diff stats share the second. Timestamp and diff stats own a non-shrinking right column. Title, repository, environment, review decision, and description-match text truncate on the left; at narrow row widths the author login folds into its avatar, with the full login retained in the tooltip and accessible text.

In the condensed header, reserve a usable floor for search and refresh, let filter labels truncate without clipping their focusable controls, and visually hide the page title while preserving its heading semantics when an active search owns the limited width. The Open filter remains fully readable in both panel states.

UI changes

Condensed header with search expanded

Before — the involvement filter and search activity collide:

After — filter controls remain separate and reachable, the search keeps a usable width, and refresh stays clear:

Narrow rows with the detail panel open

Before — metadata and the description-match label paint under the fixed timestamp and diff stats:

After — the timestamp aligns with the title, reported diff stats stay on the metadata row, and lower-priority text truncates without displacing either fixed field or clipping the checks control:

Wide rows with the detail panel closed

Before — the row has room, but this is the unfixed baseline behavior:

After — the full description-match label returns when space is available and all metadata remains separated:

Verification

• bun run fmt --check apps/web/src/components/pullRequest/PullRequestRow.tsx apps/web/src/routes/_chat.pull-requests.tsx
• bun run lint apps/web/src/components/pullRequest/PullRequestRow.tsx apps/web/src/routes/_chat.pull-requests.tsx
• bun run --cwd apps/web typecheck
• git diff --check
• Browser-verified with matched before/after captures for the condensed header, narrow rows with the detail panel open, and wide rows with it closed.

Built with GPT-5.6 Sol in T3 Code through the Codex harness.

---

Note

Low Risk
Presentation-only CSS and layout changes in the pull-requests list and header; no API, auth, or data-flow changes.

Overview
Fixes layout overlap when the PR list is narrow (detail panel open) or the condensed header search is expanded.

List rows move from a three-column shell to a two-column grid with an inner two-row grid: updated time sits on the title row (right), and diff stats sit on the metadata row (right) so they no longer stack in a fixed column that metadata could paint under. Metadata chips get stronger truncation and min-width rules; the author login can collapse to avatar-only at small widths via a new labelClassName on PullRequestActorLabel and @container/pr-row-meta. The “matched in the description” hint becomes a compact search icon + tooltip badge with responsive label text instead of a full inline string.

Condensed header tracks searchExpanded to visually hide the “Pull Requests” title (still in the DOM for accessibility) while search is open, drops the breadcrumb separator in that state, and lets filters/search shrink with truncated filter menu labels and a flexible expanded search width (min-w-24 shrink vs fixed shrink-0).

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

Note

Fix pull request metadata overlap in PullRequestRowImpl and pull-requests header layout

• Reworks the row layout in PullRequestRowImpl from a 3-column to a 2-column grid, placing the updatedAt label inline with the title on the first row and the diff stat right-aligned on the second row
• Replaces the plain matchedElsewhere text badge with an icon-and-tooltip chip using SearchIcon, with an accessible sr-only label and a responsive text span
• Updates truncation and min-width classes across environmentLabel, PullRequestActorLabel, and reviewDecision to prevent overflow; PullRequestActorLabel gains an optional labelClassName prop for independent truncation control
• In the pull-requests route header, the condensed breadcrumb hides the title when search is expanded, filter menu triggers accept external className and truncate long labels, and ExpandableSearch shrinks with a smaller minimum width instead of using shrink-0

^{Macroscope summarized 92bfd4e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1ed5a7bf-3299-41a3-bba4-2708878d9ca2

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Warning

Your free Security trial is over. An organization admin can activate Security or dismiss this notice.

---

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

[macroscopeapp]

One finding on the overflow clip added to the row meta line. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Approved at 8180b27

Macroscope's review found this PR approvable — This is a focused UI bug fix that keeps pull-request metadata and header controls within narrow layouts without changing data, workflows, or product defaults. The implementation is limited to existing components and responsive presentation behavior.

^{You can add or adjust custom eligibility rules. Learn more.}

[macroscopeapp]

One finding on the condensed topbar controls container.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One new finding on the breadcrumb scope crumb. The previously raised min-w-0 on the header controls container (apps/web/src/routes/_chat.pull-requests.tsx:1903) is unchanged at this head, so it is not re-posted here.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two layout/accessibility regressions in the condensed pull-requests header. The row meta-line changes look right now that the text segments truncate instead of relying on the clip.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One new finding on the latest commit: the container-query hidden on the checks indicator leaves a dangling · separator in the meta line.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the latest commit: the filters crumb was changed back to shrink-0, which disables the truncation this PR added to CompactFilterMenu and lets the new overflow-hidden nav hard-clip a filter trigger while the topbar search is expanded.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the condensed header: the filter crumb's shrink-0 makes the new truncation path in CompactFilterMenu unreachable, so the header deficit lands as hard clipping of the trailing filter triggers instead of shortened labels.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: removing shrink-0 from the author label lets that segment collapse below its own avatar, which re-introduces the metadata overlap this PR is fixing.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate b4a2c72

Dismissing prior approval to re-evaluate 9773ee2

[macroscopeapp]

Reviewed the row/header layout changes for UI consistency. One concrete layout regression in the new PullRequestRow grid; commented inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding in PullRequestRow.tsx: the new "matched in the description" pill can be squeezed narrower than the icon it contains, so the icon escapes the pill and overlaps its neighbour in the meta line — the same overlap class this PR is fixing elsewhere. The header changes in _chat.pull-requests.tsx now read consistently (crumb shrinks, labels truncate, title stays in the accessibility tree).

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the new match badge: overflow-hidden stops the icon painting outside the pill, but with min-w-0 still in place the pill now has no width floor at all, so the badge clips itself away instead of clipping excess text. Details inline.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 1891b0e. Configure here.}