From 3d6c3caae16f812db80c1c2b08d597708dd7f263 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Wed, 22 Apr 2026 11:55:25 +0200
Subject: [PATCH 1/2] fix(logs): remove duplicate main element on logs page

ViewportConstrainedPage wrapped its content in Layout.Page, which
renders a <main>. OrganizationLayout already renders a Layout.Page at
the route root, so the logs page produced two <main> elements when
page-frame was active. Switch the inner wrapper to Stack (a <div>) with
the same flex/background styles, leaving the outer Layout.Page as the
sole <main>.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../explore/components/viewportConstrainedPage.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/static/app/views/explore/components/viewportConstrainedPage.tsx b/static/app/views/explore/components/viewportConstrainedPage.tsx
index 10fe34b6c3cbbd..0be8819614c23f 100644
--- a/static/app/views/explore/components/viewportConstrainedPage.tsx
+++ b/static/app/views/explore/components/viewportConstrainedPage.tsx
@@ -1,11 +1,10 @@
 import styled from '@emotion/styled';
 
-import type {FlexProps} from '@sentry/scraps/layout';
+import {Stack, type FlexProps} from '@sentry/scraps/layout';
 
-import * as Layout from 'sentry/components/layouts/thirds';
 import {SHORT_VIEWPORT_HEIGHT} from 'sentry/utils/useIsShortViewport';
 
-interface ViewportConstrainedPageProps extends FlexProps<'main'> {
+interface ViewportConstrainedPageProps extends FlexProps<'div'> {
   constrained?: boolean;
   hideFooter?: boolean;
 }
@@ -20,6 +19,9 @@ interface ViewportConstrainedPageProps extends FlexProps<'main'> {
  *
  * When constrained, the global footer sibling is hidden on smaller
  * viewport heights and when `hideFooter` is set.
+ *
+ * Renders as a `<div>` — the surrounding `<main>` is provided by the
+ * root `Layout.Page` in `OrganizationLayout`.
  */
 export function ViewportConstrainedPage({
   constrained = true,
@@ -27,11 +29,13 @@ export function ViewportConstrainedPage({
   ...rest
 }: ViewportConstrainedPageProps) {
   if (!constrained) {
-    return <Layout.Page {...rest} />;
+    return <Stack flex="1" background="primary" {...rest} />;
   }
 
   return (
     <ConstrainedPage
+      flex="1"
+      background="primary"
       minHeight="0"
       overflow="hidden"
       data-hide-footer={hideFooter ? '' : undefined}
@@ -40,7 +44,7 @@ export function ViewportConstrainedPage({
   );
 }
 
-const ConstrainedPage = styled(Layout.Page)`
+const ConstrainedPage = styled(Stack)`
   contain: size;
 
   @media (max-height: ${SHORT_VIEWPORT_HEIGHT}px) {

From f4f4bbae28fdf7fba79f13bda9e553f6a86d1f82 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Wed, 22 Apr 2026 12:04:53 +0200
Subject: [PATCH 2/2] ref(logs): drop redundant background on
 ViewportConstrainedPage

The outer Layout.Page in OrganizationLayout already applies
background="primary" in page-frame mode, and in legacy mode no
background was set. Dropping the explicit background avoids a redundant
override in page-frame and a subtle visual regression in legacy mode.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../views/explore/components/viewportConstrainedPage.tsx    | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/static/app/views/explore/components/viewportConstrainedPage.tsx b/static/app/views/explore/components/viewportConstrainedPage.tsx
index 0be8819614c23f..e1fef47e40fca0 100644
--- a/static/app/views/explore/components/viewportConstrainedPage.tsx
+++ b/static/app/views/explore/components/viewportConstrainedPage.tsx
@@ -19,9 +19,6 @@ interface ViewportConstrainedPageProps extends FlexProps<'div'> {
  *
  * When constrained, the global footer sibling is hidden on smaller
  * viewport heights and when `hideFooter` is set.
- *
- * Renders as a `<div>` — the surrounding `<main>` is provided by the
- * root `Layout.Page` in `OrganizationLayout`.
  */
 export function ViewportConstrainedPage({
   constrained = true,
@@ -29,13 +26,12 @@ export function ViewportConstrainedPage({
   ...rest
 }: ViewportConstrainedPageProps) {
   if (!constrained) {
-    return <Stack flex="1" background="primary" {...rest} />;
+    return <Stack flex="1" {...rest} />;
   }
 
   return (
     <ConstrainedPage
       flex="1"
-      background="primary"
       minHeight="0"
       overflow="hidden"
       data-hide-footer={hideFooter ? '' : undefined}