Skip to content

fix(page-frame): Constrain replay and feedback layouts#113266

Merged
priscilawebdev merged 8 commits into
masterfrom
priscilawebdev/fix/replay-page-frame-viewport-sizing
Apr 20, 2026
Merged

fix(page-frame): Constrain replay and feedback layouts#113266
priscilawebdev merged 8 commits into
masterfrom
priscilawebdev/fix/replay-page-frame-viewport-sizing

Conversation

@priscilawebdev

@priscilawebdev priscilawebdev commented Apr 17, 2026

Copy link
Copy Markdown
Member

Closes https://linear.app/getsentry/issue/DE-1165/replay-detail-and-feedback-do-not-stretch-to-available-page-frame

Before

Screen.Recording.2026-04-17.at.14.58.55.mov

After

Screen.Recording.2026-04-17.at.15.01.01.mov

@priscilawebdev
priscilawebdev force-pushed the priscilawebdev/fix/replay-page-frame-viewport-sizing branch from 9c2fbb3 to 4152424 Compare April 17, 2026 12:58
@priscilawebdev
priscilawebdev marked this pull request as ready for review April 17, 2026 13:09
@priscilawebdev
priscilawebdev requested review from a team as code owners April 17, 2026 13:09
@linear-code

linear-code Bot commented Apr 17, 2026

Copy link
Copy Markdown

@natemoo-re natemoo-re left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

A few suggestions but looks good overall—feel free to address prior to merge.

Comment on lines +174 to +208
const pageBody = (
<PageFiltersContainer>
<ErrorBoundary>
<Stack flex={1} align="stretch" gap="xl" background="primary" overflow="hidden">
<LayoutGrid hideTop={hideTop}>
{!hideTop && (
<Stack
flexGrow={1}
gap="md"
area="top"
direction={{xs: 'column', sm: 'row'}}
align={{xs: 'stretch', sm: 'start'}}
>
<FeedbackFilters />
<SearchContainer>
<FeedbackSearch />
</SearchContainer>
</Stack>
)}
{hasSetupOneFeedback || hasSlug ? (
isMediumOrSmaller ? (
smallerScreenView
) : (
largeScreenView
)
) : (
<SetupContainer>
<FeedbackSetupPanel />
</SetupContainer>
)}
</LayoutGrid>
</Stack>
</ErrorBoundary>
</PageFiltersContainer>
);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

A local variable is a good sign this could be extracted to a local <PageContent /> component

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Comment on lines +315 to +317
const PageFrameViewport = styled(Stack)`
contain: size;
`;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Let's add a contain prop to Container so all our layout components can set this?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

@billyvg billyvg left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I'll defer to nate on the CR, but visually looks good to me, thanks for fixing!

@priscilawebdev
priscilawebdev merged commit 8c43a8e into master Apr 20, 2026
73 of 75 checks passed
@priscilawebdev
priscilawebdev deleted the priscilawebdev/fix/replay-page-frame-viewport-sizing branch April 20, 2026 08:17
@github-actions github-actions Bot locked and limited conversation to collaborators May 5, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants