ref(nav): Remove Layout.Page usage from individual views#111775
Merged
ref(nav): Remove Layout.Page usage from individual views#111775
Conversation
Remove all per-page <Layout.Page> wrappers from 74 view files and lift
the single wrapper into organizationLayout, where it now surrounds the
<Outlet /> directly after <TopBar />. This ensures every page is
consistently framed at the layout level without each view having to
opt in.
Files that only used Layout.Page had their `import * as Layout` removed
entirely. Files that used Layout.Page alongside other Layout.* exports
kept their namespace import. A handful of components that extended
Layout.Page via styled() were updated to use styled('main') with
equivalent CSS. Return statements that lost their single root element
were wrapped in Fragment.
Co-Authored-By: Claude <noreply@anthropic.com>
github-actions
bot
added
the
Scope: Frontend
…ments
Components that previously extended Layout.Page via styled() were
rendered as <main>, creating nested <main> elements inside the outer
<Layout.Page> now provided by organizationLayout. Change these to
styled('div') since the semantic <main> is already provided by the
layout wrapper.
Co-Authored-By: Claude <noreply@anthropic.com>
…tion Use tokens.background.primary for the Layout.Page background when the page-frame feature flag is enabled. The previous secondary background was incorrect for the page content area. Also fix leftover indentation in settingsWrapper.tsx from the removed Layout.Page wrapper. Co-Authored-By: Claude <noreply@anthropic.com>
Each place where Layout.Page was removed is now wrapped in a Stack
component with flex={1}. Instances that previously used the withPadding
prop also receive padding="2xl 3xl". Styled Layout.Page components are
converted to styled(Stack).
Co-Authored-By: Claude <noreply@anthropic.com>
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
| return ( | ||
| <SentryDocumentTitle title={t('Alerts')} orgSlug={organization.slug}> | ||
| <Layout.Page> | ||
| <Stack flex={1}> |
Member
Author
There was a problem hiding this comment.
Doesn't make a difference, but the order should be preserved
JonasBa
commented
Mar 30, 2026
| <LoadingIndicator /> | ||
| </Layout.Page> | ||
| ); | ||
| return <LoadingIndicator />; |
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
JonasBa
commented
Mar 30, 2026
Member
Author
|
@TkDodo @priscilawebdev I'm opening this for review early given that you are ahead time zone wise. The changes are not complex, however the bots have missed a couple instances that I plan to address before merging this. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Autofix Details
Bugbot Autofix prepared fixes for both issues found in the latest run.
- ✅ Fixed: Missing
flex={1}on GettingStartedLayout component- Added flex={1} prop to GettingStartedLayout component to match Layout.Page behavior and fill viewport height.
- ✅ Fixed: Second
StyledLayoutPageusage missingflex={1}prop- Added flex={1} prop to the second StyledLayoutPage usage on line 147 to match the first usage and ensure consistent layout behavior.
Or push these changes by commenting:
@cursor push 6cb88251a5
Preview (6cb88251a5)
diff --git a/static/app/views/issueDetails/groupReplays/groupReplays.tsx b/static/app/views/issueDetails/groupReplays/groupReplays.tsx
--- a/static/app/views/issueDetails/groupReplays/groupReplays.tsx
+++ b/static/app/views/issueDetails/groupReplays/groupReplays.tsx
@@ -144,7 +144,7 @@
return (
<SelectedReplayIndexProvider>
- <StyledLayoutPage padding="2xl 3xl">
+ <StyledLayoutPage flex={1} padding="2xl 3xl">
<Stack>
<ReplayFilterMessage />
<Flex align="center" gap="md">
diff --git a/static/app/views/projectInstall/gettingStarted.tsx b/static/app/views/projectInstall/gettingStarted.tsx
--- a/static/app/views/projectInstall/gettingStarted.tsx
+++ b/static/app/views/projectInstall/gettingStarted.tsx
@@ -31,7 +31,7 @@
const currentPlatform = allPlatforms.find(p => p.id === currentPlatformKey);
return (
- <GettingStartedLayout padding="2xl 3xl">
+ <GettingStartedLayout flex={1} padding="2xl 3xl">
{loadingProjects ? (
<LoadingIndicator />
) : project ? (This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
dashed
pushed a commit
that referenced
this pull request
Apr 1, 2026
This PR modifies the use of Layout.Page to something that is defined at
the root layout level as opposed to the route level.
This is done because a) folks were not aware they should use it, and we
never enforced it and b) the page frame design comes with design
opinionation which requires us to lock this down.
Because some designs were restyling the layout to hide the footer, the
actual location of the footer in the DOM order had to be moved, which
enables us to temporarily preserve the functionality before entirely
removing the footer from the DOM (pending page-frame release)
In other cases where Layout.Page was used, the usage had been converted
to `<Stack flex={1} padding={withPadding ? ... : undefined>` which
preserves the initial styling previously provided by Layout.Page
component
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Priscila Oliveira <priscila.oliveira@sentry.io>
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
This PR modifies the use of Layout.Page to something that is defined at the root layout level as opposed to the route level.
This is done because a) folks were not aware they should use it, and we never enforced it and b) the page frame design comes with design opinionation which requires us to lock this down.
Because some designs were restyling the layout to hide the footer, the actual location of the footer in the DOM order had to be moved, which enables us to temporarily preserve the functionality before entirely removing the footer from the DOM (pending page-frame release)
In other cases where Layout.Page was used, the usage had been converted to
<Stack flex={1} padding={withPadding ? ... : undefined>which preserves the initial styling previously provided by Layout.Page component