Skip to content

fix(web): align pull request row metadata

MacroscopeApp / Macroscope - UI Consistency failed Aug 30, 2026 in 3m 15s

UI Consistency: 1 issue found

apps/web/src/components/pullRequest/PullRequestRow.tsx — the new row grid uses items-baseline, but both left-column items synthesize their baselines from their bottom border edge (title is truncate/overflow: hidden; the meta line is overflow-hidden + @container/pr-row-meta, whose container-type: inline-size implies layout containment). The timestamp and diff stat are therefore pushed ~4–6px below the text they should align with, and the row grows past the [contain-intrinsic-block-size:54px] hint used for content-visibility: auto, so skipped rows mis-report their height to the scrollbar. Suggested fix: items-center.

Inline comment posted on line 63.

Details

Note

Your check run agent prompt is: .macroscope/check-run-agents/ui-consistency.md
More information about how Check Run Agents work can be found in our Help Center.

Scope reviewed: apps/web/src/components/pullRequest/PullRequestRow.tsx and apps/web/src/routes/_chat.pull-requests.tsx (both in the check's include patterns), plus apps/web/src/components/pullRequest/pullRequestPresentation.tsx for the contracts of PullRequestMetaLine, PullRequestActorLabel, and PullRequestDiffStat.

Checked and not flagged:

  • PullRequestDiffStat already sets tabular-nums and colours its own numbers, so moving it out of the old right-hand wrapper does not lose typography or tone.
  • The matchedElsewhere pill remains a real meta-line segment (only its label collapses below @xs), so PullRequestMetaLine's separator contract is not violated and no trailing · is produced.
  • PullRequestActorLabel at min-w-4 max-w-40: the inner login span is truncate, so it shrinks without spilling; the min-w-4 floor keeps the shrink-0 avatar inside its box. This addresses the prior run's finding and was not re-flagged.
  • Header changes in _chat.pull-requests.tsx (CompactFilterMenu truncation, shrink on the filter crumb, sr-only title, min-w-24 shrink search) keep the title in the accessibility tree and give the nav a truncation path, and were previously reviewed; no new violation introduced by this head commit.

Verification note: the finding is derived from CSS box-alignment/containment semantics (scroll containers and layout-contained boxes have synthesized baselines) plus the row's own declared intrinsic block size; no browser artifact was available to attach.


🔍 Agent activity — 8 tool calls

💭 I want to check the current state of the files at head commit 9773ee2, since prior runs have flagged several issues across successive commits.

1. browse_code — apps/web/src/components/pullRequest/PullRequestRow.tsx

2. browse_code — apps/web/src/routes/_chat.pull-requests.tsx

💭 I'm checking whether the earlier flagged issue with PullRequestActorLabel's width constraints and missing text truncation was ever fixed — it looks like the same unclipped className is still there at line 116. I also want to trace the shrink/shrink-0 class changes on the CompactFilterMenu and WorkspaceBreadcrumbItem between commits to see if that spacing issue was resolved, and I'm re-examining the matched-elsewhere tooltip logic where hiding a segment with CSS still leaves it counted as a child, which could affect the separator rendering.

3. git_tools — 7024f05..9773ee2

4. git_tools — e09b88b..9773ee2

💭 Let me check the diffs of the last two commits.

5. git_tools — 9773ee2

6. git_tools — b4a2c72

💭 The latest commit reorganizes the row into a 2x2 grid within the second column, with title and relative time on top and meta line and diff stat below, using baseline alignment and container queries for overflow handling. I'm now weighing whether this new layout structure actually works well. One concern: the items-baseline alignment could be problematic since the meta line has overflow-hidden, which means it won't have a natural content baseline and will instead synthesize one from its bottom edge — potentially misaligning it with the diff stat text on that row. So the meta line's baseline sits at its bottom border edge, while the diffstat's baseline is its actual text baseline — aligning them would shift the diffstat down a few pixels, subtly growing row 2 and throwing off the visual alignment, though this depends on the actual overflow behavior in PullRequestDiffStat and PullRequestMetaLine. I also realize row 1 has the same issue: the title span uses truncate, which means overflow-hidden too, so it's also a scroll container with a synthesized baseline from its bottom edge. This matches a known browser quirk — Chrome synthesizes flex item baselines from the border-box bottom edge when the item has overflow:hidden, which commonly causes baseline-alignment mismatches with truncated text next to normal text like a timestamp. So the time's baseline ends up roughly 5px below the title's actual text baseline, since truncate's overflow-hidden replaces the title's real baseline with its box edge — meaning the intended baseline alignment breaks visibly, growing the row height instead of keeping things flush. This also means items-center on the outer grid affects vertical rhythm, and the fixed contain-intrinsic-block-size:54px may no longer match the true rendered row height, throwing off scrollbar accuracy. I'm fairly confident in this since it's standard CSS behavior — per CSS2 §10.8.1 and Box Alignment spec, an inline-block or flex/grid item with overflow other than visible has its baseline synthesized from the border box bottom, not its text baseline, and browsers consistently apply this rule. The practical fix is switching from items-baseline to items-center, since keeping truncate on the item itself means its baseline gets synthesized regardless. The original design used a flex column with items-end for that third column, so this alignment behavior actually changed when the layout was restructured — centering the boxes (20px title vs 16px time) should visually resolve the mismatch. I'm now checking whether this counts as a real regression against the preservation rules: since both left-column elements truncate/overflow, items-baseline silently falls back to bottom-edge alignment, pushing the timestamp and diff stat below where they should sit and inflating row height past the declared 54px containment. I want to verify whether PullRequestDiffStat accepts a className and whether it has its own overflow or tabular-nums styling that the parent previously supplied.

7. browse_code — apps/web/src/components/pullRequest/pullRequestPresentation.tsx

💭 I confirm PullRequestDiffStat's children set their own colors, so muted-foreground doesn't affect it, and tabular-nums is already applied. I also note the component now positions itself in the grid at col-start-2 row-start-2 with justify-self-end text-xs, and that it returns null when there are no additions or deletions, which affects the row layout. Now I'm digging into the baseline alignment question more carefully. The timestamp uses whitespace-nowrap and the diff stat is inline-flex, while the title column can shrink with minmax(0,1fr). I need to trace through how align-items: baseline behaves across the truncated title (which synthesizes a baseline from its overflow box) versus the timestamp's natural text baseline, since they're grouped together in the same grid row. This matches a known truncation-and-overflow baseline shift bug. Working through the math: the truncated title's baseline sits at its bottom edge (20px), while the timestamp's natural baseline is around 12.2px, so with baseline alignment the timestamp gets pushed down roughly 7.8px to match the title's larger offset. That means the timestamp visually sinks below the title's actual text baseline by about 6.2px—a noticeable misalignment. I'm seeing the same pattern repeat in the meta row, where the diffstat's baseline also gets shifted down relative to the truncated overflow-hidden container, causing a similar sunk appearance there. The bigger issue: adding these two rows pushes the actual rendered height to roughly 61.6px, well past the declared 54px intrinsic size hint used for scrollbar calculations on skipped rows—so that optimization becomes inaccurate too. Switching from items-baseline to items-center seems like the minimal fix — it keeps row heights at 20+16=38, matching the 54px intrinsic size, and still looks visually reasonable for aligning the timestamp with the title. I'm also considering whether baseline alignment could be preserved instead by restructuring how the truncating title element establishes its baseline within the grid item. I'll flag this as a new issue introduced by the head commit, worth posting. I've confirmed justify-self-end pairs correctly with col-start-2, and now I'm checking how the meta line's flexible left column interacts with the auto-sized right column that fits the widest of timestamp or diffstat. Previously the timestamp lived in the outer grid's third column, so title and meta both shared the flexible second column while time stayed auto-sized—this restructuring moves that behavior inward, which seems intentional. I'm also examining the container query change: moving @container/pr-row-meta from the outer wrapper onto the meta line itself should still work since Tailwind's container utility sets container-type: inline-size, making the element itself a valid size container even as a flex child. Layout containment also raises a subtler issue: it can synthesize the element's baseline from its border box rather than its content, which could matter for how this element aligns with siblings in a flex or grid context — worth checking if that affects the meta line's alignment here. This is confirmed by both overflow-hidden and container-type behavior, plus the CSS2.1 inline-block rule for the truncated title. So the conclusion holds: items-baseline has nothing to align against here—both left-column items synthesize baselines from their bottom border edges, pushing the right column (timestamp, diff stat) down ~4-8px and growing the row past the intended 54px height hint. Now checking other outstanding findings—I don't want to repost duplicates. I recall the actor label min-w-4 max-w-40 was flagged in a prior run at commit 7024f05, about dropping shrink-0 with no truncate/clipping. The author then responded with commit b4a2c72 changing max-w-40 to min-w-4 max-w-40, so I need to check whether that response actually addresses the concern by looking at how PullRequestActorLabel is structured with its flex layout. Working through the shrink behavior: with min-w-4 on the wrapper, the avatar stays fixed at 16px shrink-0, and the truncating login span can shrink down to zero width since overflow:hidden makes its automatic minimum size zero. That means the text just gets clipped with an ellipsis inside its own box rather than overflowing the container, so the minimum total width ends up being roughly the avatar plus the gap. Actually, since the empty span is invisible and only the 16px avatar renders, there's no real visual overlap — the overflow is inert whitespace, not visible content. The bigger question is min-w-4 versus min-w-0: with min-w-0 the wrapper could shrink fully and the shrink-0 avatar would overflow the container instead. Now I'm checking whether the meta line's overflow-hidden still clips the focusable PullRequestChecksPopover trigger, since a prior review flagged that exact clipping issue — I need to see if the other segments shrink enough first to avoid hiding it. That was already flagged and the author already addressed it with shrinkable segments, so I shouldn't repeat it. Checking the tooltip pill change from inline to block with truncate — since it's inside a flex parent it blockifies regardless, so this switch doesn't functionally matter; min-w-0 lets it shrink properly and truncate works as intended, so this is fine, not a new issue. Now I'm considering the reading order change: title, then timestamp, then meta line, then diff stats — that's a reasonable screen reader flow. I'm also checking whether removing the outer wrapper's overflow-hidden matters, but since the inner grid still has min-w-0 and the children handle their own truncation, this shouldn't cause any regression. Right, this confirms it: per the CSS spec, a block-level box with overflow set becomes a scroll container, and scroll containers synthesize their baseline from the border box rather than an in-flow line box. This matches the well-known flexbox behavior where adding truncation to a baseline-aligned item drops it to bottom-edge alignment, so the same should apply here. If diffstat is null, row 2 only has one item so there's no misalignment; row 1 always has both, so the row height grows a few pixels and the timestamp will visibly sit lower than the title's baseline. I'll write a comment pointing to line 63 with a suggested fix swapping items-baseline for items-center on that grid span, since it's a self-contained change within the diff. Now I'm drafting the review comment explaining that items-baseline doesn't actually align anything meaningful there since both left-column items are scroll containers rather than text, and noting this check should report a failure given the finding. I'll add a suggestion block confirming the fix restores the 54px row height, then move on to posting the review.

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


Agent Credits: 84 credits

Token usage: 12 uncached input · 189,669 cache-read input · 58,001 cache-write input · 13,522 output
Agent Credits may also include non-token charges from external tools such as web research.