ref(layout): use Layout.Page on isolated pages#111644
Conversation
Wraps non-compliant routes in isolated page areas with Layout.Page. Part of the Layout.Page audit remediation.
github-actions
bot
added
the
Scope: Frontend
Move Layout.Page from the overview page component to the layout component so it wraps both the header and the outlet. This ensures Layout.Header is a direct child of Layout.Page, giving it the correct border-radius and framed appearance.
Move Layout.Page from individual profiling pages to the shared ProfilingContainer so all sub-pages (including flamegraph) get the correct framing.
Profiling sub-pages individually manage Layout.Page (some with custom styling like hiding the footer), so the container-level approach causes double-wrapping. Restore Layout.Page on individual pages instead.
Move Layout.Page from flamegraph child pages to the provider components (continuousProfileProvider, transactionProfileProvider) so it wraps both the header and the outlet content.
priscilawebdev
left a comment
priscilawebdev
left a comment
There was a problem hiding this comment.
manually checked the changes and it looks good to me.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| ) : null} | ||
| <Outlet /> | ||
| </Fragment> | ||
| </Layout.Page> |
There was a problem hiding this comment.
Layout wrapper at wrong level causes nested main elements
Medium Severity
Layout.Page is added to ConversationsLayout, which wraps all child routes via Outlet — including transactionSummaryRoute and traceView, both of which render their own Layout.Page. This creates nested <main> elements (semantically invalid HTML) and breaks the ~ footer { display: none; } CSS sibling selector on traceView's inner LayoutPageWithHiddenFooter, since the footer is now a sibling of the outer <main> only. The PR description indicates the fix belongs in overview.tsx, not layout.tsx.
There was a problem hiding this comment.
Not a bug. The conversations page renders a table and drawer. transactionSummaryRoute and traceView are included as children following the same pattern as all other insight pages (frontend, backend, mobile, etc.). No visual or functional issue observed.
Move footer-hiding CSS from ProfileSummaryContainer to the Layout.Page wrapper. The ~ footer sibling selector broke when Layout.Page was added as a parent, since the footer is now a sibling of <main>, not the inner container. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>
Same fix as profile summary — move footer-hiding CSS from the inner container to the Layout.Page wrapper so the sibling selector still matches the footer element. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Deduplicate the identical styled component from four profiling files into a single export in profiling/utils.tsx. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>
Move from utils.tsx to its own component file for clarity. Co-Authored-By: Claude Opus 4.6 <noreply@example.com>
2 participants
Wraps non-compliant routes in isolated page areas with Layout.Page.
Part of the Layout.Page audit remediation.
Changes
static/app/views/insights/pages/conversations/layout.tsx: movedLayout.Pagefromoverview.tsxto the layout component so it wraps both the header and outlet contentstatic/app/views/insights/pages/conversations/overview.tsx: removedLayout.Page(now handled by layout)static/app/views/profiling/continuousProfileProvider.tsx: addedLayout.Pagewrapping header + outlet so flamegraph pages get correct framingstatic/app/views/profiling/transactionProfileProvider.tsx: addedLayout.Pagewrapping header + outlet so flamechart pages get correct framingstatic/app/views/profiling/continuousProfileFlamegraph.tsx: removedLayout.Page(now handled by provider)static/app/views/profiling/profileFlamechart.tsx: removedLayout.Page(now handled by provider)static/app/views/profiling/profileSummary/index.tsx: wrapProfileSummaryPageTogglewithLayout.Pagestatic/app/views/profiling/differentialFlamegraph.tsx: wrapDifferentialFlamegraphWithProviderswithLayout.Pagestatic/app/views/projectInstall/newProject.tsx: wrapNewProjectcontent withLayout.PageAffected routes
/organizations/:orgId/explore/conversations//organizations/:orgId/profiling/profile/:projectId/flamegraph//organizations/:orgId/profiling/profile/:projectId/:eventId/flamegraph//organizations/:orgId/profiling/summary/:projectId//organizations/:orgId/profiling/profile/:projectId/differential-flamegraph//organizations/:orgId/projects/new/Verification
<main>element