From 46689a545ee330958d3aa80c6bb85084fcbe501c Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Fri, 10 Apr 2026 08:07:00 +0200
Subject: [PATCH 1/2] ref(layout) use layout.main

---
 static/app/components/layouts/thirds.tsx              |  4 ++--
 .../explore/components/viewportConstrainedPage.tsx    | 11 +++++------
 static/app/views/explore/errors/content.tsx           |  4 ++--
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/static/app/components/layouts/thirds.tsx b/static/app/components/layouts/thirds.tsx
index 3f6483b11b9d79..1fc636239e2957 100644
--- a/static/app/components/layouts/thirds.tsx
+++ b/static/app/components/layouts/thirds.tsx
@@ -1,4 +1,4 @@
-import {useContext, type HTMLAttributes} from 'react';
+import {useContext} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -200,7 +200,7 @@ export const Body = styled((props: ContainerProps<'div'> & {noRowGap?: boolean})
   }
 `;
 
-interface MainProps extends HTMLAttributes<HTMLElement> {
+export interface MainProps extends ContainerProps {
   children: React.ReactNode;
   /**
    * Set the width of the main content.
diff --git a/static/app/views/explore/components/viewportConstrainedPage.tsx b/static/app/views/explore/components/viewportConstrainedPage.tsx
index 10fe34b6c3cbbd..d516a696b9a641 100644
--- a/static/app/views/explore/components/viewportConstrainedPage.tsx
+++ b/static/app/views/explore/components/viewportConstrainedPage.tsx
@@ -1,11 +1,9 @@
 import styled from '@emotion/styled';
 
-import 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 Layout.MainProps {
   constrained?: boolean;
   hideFooter?: boolean;
 }
@@ -27,11 +25,12 @@ export function ViewportConstrainedPage({
   ...rest
 }: ViewportConstrainedPageProps) {
   if (!constrained) {
-    return <Layout.Page {...rest} />;
+    return <Layout.Main width="full" {...rest} />;
   }
 
   return (
-    <ConstrainedPage
+    <ConstrainedMain
+      width="full"
       minHeight="0"
       overflow="hidden"
       data-hide-footer={hideFooter ? '' : undefined}
@@ -40,7 +39,7 @@ export function ViewportConstrainedPage({
   );
 }
 
-const ConstrainedPage = styled(Layout.Page)`
+const ConstrainedMain = styled(Layout.Main)`
   contain: size;
 
   @media (max-height: ${SHORT_VIEWPORT_HEIGHT}px) {
diff --git a/static/app/views/explore/errors/content.tsx b/static/app/views/explore/errors/content.tsx
index 36ece8bc0e7dfd..d323535333bcf7 100644
--- a/static/app/views/explore/errors/content.tsx
+++ b/static/app/views/explore/errors/content.tsx
@@ -25,7 +25,7 @@ export default function ErrorsContent() {
 
   return (
     <SentryDocumentTitle title={t('Errors')} orgSlug={organization?.slug}>
-      <Layout.Page>
+      <Layout.Main width="full">
         <ErrorsHeader />
         <PageFiltersContainer>
           <ExploreBodySearch>
@@ -33,7 +33,7 @@ export default function ErrorsContent() {
           </ExploreBodySearch>
         </PageFiltersContainer>
         <ErrorsBody />
-      </Layout.Page>
+      </Layout.Main>
     </SentryDocumentTitle>
   );
 }

From 6b4b5bb3310eec7ee11a8b309a3c4b7dbfaa9d07 Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Fri, 10 Apr 2026 19:18:23 +0200
Subject: [PATCH 2/2] fix(explore): Restore flex layout for page content

Make the errors page main wrapper and viewport-constrained logs wrapper explicit flex columns so explore body sections can grow to fill the remaining page height.

This preserves Layout.Main's existing behavior for the rest of the app while fixing the logs and errors pages that depend on flex-based body sizing.

Co-Authored-By: Codex <codex@openai.com>
---
 .../explore/components/viewportConstrainedPage.tsx   | 10 ++++++++--
 static/app/views/explore/errors/content.tsx          | 12 ++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/static/app/views/explore/components/viewportConstrainedPage.tsx b/static/app/views/explore/components/viewportConstrainedPage.tsx
index d516a696b9a641..44fa558067af7e 100644
--- a/static/app/views/explore/components/viewportConstrainedPage.tsx
+++ b/static/app/views/explore/components/viewportConstrainedPage.tsx
@@ -25,7 +25,7 @@ export function ViewportConstrainedPage({
   ...rest
 }: ViewportConstrainedPageProps) {
   if (!constrained) {
-    return <Layout.Main width="full" {...rest} />;
+    return <FlexMain width="full" {...rest} />;
   }
 
   return (
@@ -39,7 +39,13 @@ export function ViewportConstrainedPage({
   );
 }
 
-const ConstrainedMain = styled(Layout.Main)`
+const FlexMain = styled(Layout.Main)`
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+`;
+
+const ConstrainedMain = styled(FlexMain)`
   contain: size;
 
   @media (max-height: ${SHORT_VIEWPORT_HEIGHT}px) {
diff --git a/static/app/views/explore/errors/content.tsx b/static/app/views/explore/errors/content.tsx
index d323535333bcf7..bc731aaf94758b 100644
--- a/static/app/views/explore/errors/content.tsx
+++ b/static/app/views/explore/errors/content.tsx
@@ -1,3 +1,5 @@
+import styled from '@emotion/styled';
+
 import {FeatureBadge} from '@sentry/scraps/badge';
 
 import {FeedbackButton} from 'sentry/components/feedbackButton/feedbackButton';
@@ -25,7 +27,7 @@ export default function ErrorsContent() {
 
   return (
     <SentryDocumentTitle title={t('Errors')} orgSlug={organization?.slug}>
-      <Layout.Main width="full">
+      <ErrorsPageMain width="full">
         <ErrorsHeader />
         <PageFiltersContainer>
           <ExploreBodySearch>
@@ -33,7 +35,7 @@ export default function ErrorsContent() {
           </ExploreBodySearch>
         </PageFiltersContainer>
         <ErrorsBody />
-      </Layout.Main>
+      </ErrorsPageMain>
     </SentryDocumentTitle>
   );
 }
@@ -77,3 +79,9 @@ export function ErrorsBody() {
     </ExploreBodyContent>
   );
 }
+
+const ErrorsPageMain = styled(Layout.Main)`
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+`;