Repository navigation
fix(web): PR Code tab file tree and toolbar stay inside narrow panes - #445
Conversation
…panes - File tree pane fills the width its parent gives it instead of sizing itself to the longest compacted path; as a shrink-0 flex child it grew past its 20rem slot and the diffstats, counts and header buttons were clipped at the window's right edge. - Dock the tree beside the diff only when the Code tab row has room for both (stacked 50rem as before, split 64rem); otherwise it opens as a drawer. - Below 36rem the toolbar moves whitespace / wrap / layout / collapse-all into the View options menu so the tree toggle and the menu are never clipped. - Width rules live in t3team-prCodeLayout.logic.ts (+ unit tests) to keep the upstream-derived PullRequestCodeTab.tsx diff small.
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
github-actions
Bot
added
vouch:trusted
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6cef2b23c9
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| className={cn( | ||
| "flex h-10 min-h-10 shrink-0 items-center justify-between gap-2 border-b border-border/60 bg-background text-xs text-muted-foreground", | ||
| compactToolbar ? "px-2" : "px-4", |
There was a problem hiding this comment.
When the pane is 592–607px wide, the toolbar can oscillate continuously between compact and full modes. useElementFitsWidth compares ResizeObserverEntry.contentRect.width, which excludes padding, while this conditional changes horizontal padding from 16px to 32px: compact mode therefore measures at least 576px and switches to full, whose content width then falls below 576px and switches back. This can produce repeated renders/ResizeObserver loop errors and a flickering toolbar at common resized-panel widths; keep the measured element's padding constant or measure a padding-independent parent.
Useful? React with 👍 / 👎.
Thread transfer impact
This comment will update automatically after the next completed run. |
…eck cannot flip-flop The toolbar measures its own content box to decide whether to compact. Its padding used to follow that decision (px-2 compact, px-4 full), so a pane between about 592px and 607px wide toggled between the two on every resize-observer tick. The padding is now viewport-based (px-2, sm:px-4) and independent of the measured result. Addresses the Codex review on #445.
johnnyelwailer
changed the title
1 participant
Fixes the PR detail Code tab on narrow panes, slim windows and phones (Phil's report: the file-tree sidebar was cut off past the window's right edge, and the view was poor on slim and mobile widths).
What changed:
The width rules live in the fork-owned t3team-prCodeLayout.logic.ts with unit tests, so the upstream-derived PullRequestCodeTab.tsx diff stays small and additive.
Screenshots: real app on the box against this repo's PR #440. Before is current main, after is this branch.
Undocked window, 1440px, tree open
Before:
After:
PR page with list, 1024px, tree open (the detail pane is about 400px wide, so the tree opens as a drawer)
Before:
After:
Slim window, 700px
Before (toolbar):
After (toolbar):
Before (tree open):
After (tree open):
Phone, 390px
Before:
After:
Measured overflow (px cut off past the right edge, before -> after), tree / View options menu:
1440: 145 -> 0 / 0 -> 0
1024: 145 -> 0 / 0 -> 0
700: 160 -> 0 / 16 -> 0
390: 160 -> 0 / 44 -> 0
No horizontal page overflow at any width after the change.
Tests: t3team-prCodeLayout.logic.test.ts, t3team-prDiffExplorer.logic.test.ts and PullRequestDetailPanel.test.tsx pass (46 tests). apps/web typecheck is clean. Format, lint (no new warnings) and the additive guard pass.
Not in this PR: on the PR list page at phone width, the list column still shows as a thin sliver to the left of the detail pane. That comes from the shared inline RightPanelTabs layout, which chat uses too, so it needs its own change.