fix(web): pull request tab fits the narrow side panel - #219
Merged
Conversation
The pull request detail header only rearranged itself when the window was phone-sized, so beside a thread, where the panel can be 272px wide on a wide screen, the checks rollup was pushed past the edge, the author was squeezed out of the updated line, and the number was clipped behind the action buttons. The panel is now its own container and the header answers to its width: the actions wrap under the repository line, the title wraps to two lines, the checkout command and the diff counts drop under their rows, and the tab strip keeps its glyphs and hides the words beside them, with the words in a tooltip and for screen readers. The Summary's meta rows wrap rather than overflow.
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
github-actions
Bot
added
vouch:trusted
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When a pull request opens as a tab in the right side panel, the header was laid out for a full-width page and only rearranged itself when the whole window was phone-sized. The panel can be 272px wide on a wide screen, so the checks rollup beside the tabs was pushed past the edge, the author disappeared from the "updated" line, and the number was clipped behind the Merge and Close buttons.
The detail panel is now its own CSS container and the header answers to the panel's width instead of the window's. In a narrow panel the action buttons wrap under the repository line, the title wraps to two lines, the
gh pr checkoutcommand and the file counts drop under their rows, the tab strip tightens and keeps only the glyph of the checks rollup and the timeline order toggle (the words stay in a tooltip and for screen readers), and the Summary's Reviewers row wraps instead of overflowing. On the full Pull Requests page nothing changes at normal widths.Verified with fmt, lint, typecheck, the full web browser suite, and screenshots of the panel at 272px, 330px and 520px.