Repository navigation
conversation-activity-filter - Fix sticky header and mobile alignment - #10228
digvijay-555 wants to merge 1 commit into
Conversation
5f90b9e to
70ef2d6
Compare
70ef2d6 to
e022204
Compare
|
Please don't force-push to this PR, it makes it harder to see what changed since the last review. We merge commits rather than squash, so we care more about reviewability than a clean history. Feel free to push dirty commits. |
You're right, I over-complicated it trying to solve truncation edge cases on narrow widths. I've stripped all of that out and simplified it to just a couple of simple
|
| /* Align activity filter after title in the PR sticky header */ | ||
| [class*='StickyPullRequestHeader'] [data-component='TitleArea'] > action-menu, | ||
| [class*='prHeader'] [data-component='TitleArea'] > action-menu, | ||
| [class*='prTitleArea'] > action-menu { |
There was a problem hiding this comment.
What are these for? From what I can tell this is not needed
| } | ||
|
|
||
| /* On narrow layouts, keep primary buttons at the start */ | ||
| @media (max-width: 1012px) { |
There was a problem hiding this comment.
From my tests this value should be 1075px
| order: -1; | ||
| } | ||
|
|
||
| [data-component='PH_Actions'] > action-menu { |
| mount(ConversationActivityFilter, { | ||
| target: anchor, | ||
| anchor: anchor.firstElementChild!, | ||
| anchor: anchor.firstElementChild ?? undefined, |
| ':is([data-component="PageHeader"][data-has-nav], [class*="PageHeader"][data-has-nav]) [data-component="PH_Actions"]', | ||
| // PR view (sticky header) | ||
| '[class*="prTitleArea"]', | ||
| ':is([class*="StickyPullRequestHeader"], [class*="prHeader"]) [data-component="TitleArea"]', |
There was a problem hiding this comment.
Do not use :is() in here. Each of these are already selectors. Also why are these so many different selectors? There are like 3 for sticky header and 2 for the main one. I don’t think we need more than 1 and 1
This branch has not been deployed
2 participants
Follow-up to #10187
Description
Fixes edge cases discovered after #10187:
prTitleAreaand sticky header variants. Applied flex truncation (min-width: 0,max-width: 18vwfor branch names) to ensure long bylines do not push the<action-menu>off-screen or behind side panels on reduced viewport widths. 2. Mobile & Narrow Issue Layout: Targets[class*="menuActionsContainer"]so the button renders in mobile context actions as well as desktop, keeping the primary button (New issue) at the start ([New issue] [👁 ▾] [📋]).[Merge] [Code]buttons with the filter button on their right.Test URLs
conversation-activity-filtershould be moved to the title #10169Screenshots
Desktop Sticky header PR view
Action button on right side of buttons