Skip to content

ref(layout) use layout.main #112651

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JonasBa wants to merge 2 commits into
base: master
Choose a base branch
from
+23 −10
Open

ref(layout) use layout.main #112651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46689a5
ref(layout) use layout.main
JonasBa Apr 10, 2026
6b4b5bb
fix(explore): Restore flex layout for page content
JonasBa Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions static/app/components/layouts/thirds.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {useContext, type HTMLAttributes} from 'react';
import {useContext} from 'react';
import {css} from '@emotion/react';
import styled from '@emotion/styled';

Expand Down Expand Up @@ -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.
Expand Down
17 changes: 11 additions & 6 deletions static/app/views/explore/components/viewportConstrainedPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -27,11 +25,12 @@ export function ViewportConstrainedPage({
...rest
}: ViewportConstrainedPageProps) {
if (!constrained) {
return <Layout.Page {...rest} />;
return <FlexMain width="full" {...rest} />;
}

return (
<ConstrainedPage
Copy link
Copy Markdown
Contributor

@cursor cursor bot Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing flex growth causes constrained page to collapse

High Severity

Switching from Layout.Page to Layout.Main drops the flex="1" that Layout.Page provides via its Stack wrapper. Layout.Main renders a plain Container with no flex-grow behavior. In the constrained path, ConstrainedMain applies contain: size (which makes the element's intrinsic size zero) and minHeight="0". Without flex="1" to grow within the parent flex container (Layout.Page), this element collapses to zero height, making the logs page content invisible. The non-constrained path is also affected — the content won't fill remaining vertical space — though at least children remain visible. A flex="1" prop needs to be passed to Layout.Main in both paths.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 46689a5. Configure here.

Copy link
Copy Markdown
Member

@priscilawebdev priscilawebdev Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a valid feedback

Image

but other than that, it looks good!

<ConstrainedMain
width="full"
minHeight="0"
overflow="hidden"
data-hide-footer={hideFooter ? '' : undefined}
Expand All @@ -40,7 +39,13 @@ export function ViewportConstrainedPage({
);
}

const ConstrainedPage = styled(Layout.Page)`
const FlexMain = styled(Layout.Main)`
display: flex;
flex-direction: column;
min-height: 0;
`;
Comment on lines +42 to +46
Copy link
Copy Markdown
Collaborator

@TkDodo TkDodo Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn’t we use a Flex with render prop instead of custom styled ?

Copy link
Copy Markdown
Member Author

@JonasBa JonasBa Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I should add a lint rule just to prevent myself from doing this at this point


const ConstrainedMain = styled(FlexMain)`
contain: size;

@media (max-height: ${SHORT_VIEWPORT_HEIGHT}px) {
Expand Down
12 changes: 10 additions & 2 deletions static/app/views/explore/errors/content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import styled from '@emotion/styled';

import {FeatureBadge} from '@sentry/scraps/badge';

import {FeedbackButton} from 'sentry/components/feedbackButton/feedbackButton';
Expand Down Expand Up @@ -25,15 +27,15 @@ export default function ErrorsContent() {

return (
<SentryDocumentTitle title={t('Errors')} orgSlug={organization?.slug}>
<Layout.Page>
<ErrorsPageMain width="full">
<ErrorsHeader />
<PageFiltersContainer>
<ExploreBodySearch>
<ErrorsFilterSection />
</ExploreBodySearch>
</PageFiltersContainer>
<ErrorsBody />
</Layout.Page>
</ErrorsPageMain>
</SentryDocumentTitle>
);
}
Expand Down Expand Up @@ -77,3 +79,9 @@ export function ErrorsBody() {
</ExploreBodyContent>
);
}

const ErrorsPageMain = styled(Layout.Main)`
display: flex;
flex-direction: column;
min-height: 0;
`;
Copy link
Copy Markdown
Contributor

@cursor cursor bot Apr 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicated styled component across two files

Low Severity

ErrorsPageMain is an exact duplicate of FlexMain from viewportConstrainedPage.tsx — same base component (Layout.Main), same CSS (display: flex; flex-direction: column; min-height: 0). The errors page could reuse FlexMain (if exported) or use ViewportConstrainedPage with constrained={false} instead of duplicating the styled component.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 6b4b5bb. Configure here.

Loading