fix(settings): Portal SettingsPageHeader action to TopBar in page frame layout#112771
Merged
priscilawebdev merged 5 commits intomasterfrom Apr 13, 2026
Merged
Conversation
The SettingsPageHeader uses a negative margin trick (-32px) designed for the non-page-frame layout where the container has 32px top padding. In the page frame layout, the container only has 8px top padding, causing the action button to extend above the scroll container origin and become inaccessible. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-actions
bot
added
the
Scope: Frontend
Only reset the wrapper's negative margin in the page-frame case. The Title and Action inner margins provide correct internal layout and spacing below the header. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Move the action button (e.g. "Create Project") into the TopBar actions slot when the page-frame feature is active, matching the pattern used by dashboards and other pages. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The action button is now portaled to the TopBar, so the negative margin clipping workaround is no longer needed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
priscilawebdev
changed the title
JonasBa
reviewed
Apr 13, 2026
| </Title> | ||
| )} | ||
| </TitleWrapper> | ||
| {!hasPageFrame && action && <Action isNarrow={isNarrow}>{action}</Action>} |
Member
There was a problem hiding this comment.
When conditions are mutually exclusive, it is usually preferable to group them into a single branch so that we don't need to keep their representations up to date across two instances
A ternary expression would make that relationship more explicit and easier to maintain going forward as we don't need to maintain the inverse condition separately
hasPageFrame ? <TopBar.Slot>{action}</TopBar.Slot> : <Action>{action}</Action>
Use a single conditional to choose between the page-frame slot and the inline action wrapper. Keep the mutually exclusive action rendering in one branch so future updates only need to change one representation. Co-Authored-By: OpenAI Codex <codex@openai.com>
JonasBa
approved these changes
Apr 13, 2026
priscilawebdev
deleted the
priscila/fix/settings-page-header-button-clipped
branch
wedamija
pushed a commit
that referenced
this pull request
Apr 13, 2026
…me layout (#112771) **Before** <img width="1506" height="201" alt="image" src="https://github.com/user-attachments/assets/2446c5f0-ebcc-4665-9ae7-7cbdf3084966" /> **After** <img width="2104" height="225" alt="image" src="https://github.com/user-attachments/assets/3cc3579f-76a2-4dff-9cd6-ac022725f0f1" /> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: OpenAI Codex <codex@openai.com>
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
2 participants
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.
Before
After