Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-23 13:46:45 +02:00
Code Issues Projects Releases Wiki Activity

chore: Use fixed-width sidebar instead of dynamic modal. (#10315)

Browse Source 
Uses a fixed-width sidebar component instead of the dynamic sidebar
component for the change request sidebar. This fixes a case where the
modal would suddenly grow narrower when a change was sent to review
(introduced in https://github.com/Unleash/unleash/pull/10307):

Before submitting (in main)

![image](https://github.com/user-attachments/assets/a8409cf1-b066-4f97-8e28-cd2470646a9f)

After submission (in main)

![image](https://github.com/user-attachments/assets/1735a07f-5792-452f-9a22-2309da9e28fa)

Before submitting (on this branch)

![image](https://github.com/user-attachments/assets/4ffff55d-cb8a-4cb6-a22e-54da8182771b)

After submission (on this branch)

![image](https://github.com/user-attachments/assets/1569163a-a8d6-4e2c-8239-6e99b9dcfdd0)

I don't see any reason why the CR sidebar should be dynamic, so making
it fixed width with the solution we already have seems pretty sensible
to me. Keeps things consistent and prevents us from solving the same
problem multiple times in multiple ways.

Yes this change makes the sidebar a little wider, but I think that's
fine. It's also closer to what it was previously, I think. Again, we can
rethink this if necessary. And of course, the modal still smooshes
together when it needs to:
<img width="431" alt="image"
src="https://github.com/user-attachments/assets/54f31284-75a4-4038-9943-c3b42363ecb4"
/>
This commit is contained in:
Thomas Heartman 2025-07-04 13:44:17 +02:00 committed by GitHub
parent 3bb7426392
commit 8e0e9c834e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
View File

@ -1,6 +1,6 @@
import { useState, type VFC } from 'react';
import { Box, Button, styled, Typography } from '@mui/material';
import { DynamicSidebarModal } from 'component/common/SidebarModal/SidebarModal';
import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
import { PageContent } from 'component/common/PageContent/PageContent';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import CheckCircle from '@mui/icons-material/CheckCircle';
@ -22,7 +22,6 @@ interface IChangeRequestSidebarProps {
const StyledPageContent = styled(PageContent)(({ theme }) => ({
height: '100vh',
overflow: 'auto',
maxWidth: 'max(40vw, 1000px)',
padding: theme.spacing(6),
[theme.breakpoints.down('md')]: {
padding: theme.spacing(4, 2),
@ -106,11 +105,7 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
if (!loading && !data) {
return (
<DynamicSidebarModal
open={open}
onClose={onClose}
label='Review changes'
>
<SidebarModal open={open} onClose={onClose} label='Review changes'>
<StyledPageContent
disableBorder={true}
header={<PageHeader titleElement='Review your changes' />}
@ -119,16 +114,12 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
{/* FIXME: empty state */}
<BackButton onClick={onClose}>Close</BackButton>
</StyledPageContent>
</DynamicSidebarModal>
</SidebarModal>
);
}
return (
<DynamicSidebarModal
open={open}
onClose={onClose}
label='Review changes'
>
<SidebarModal open={open} onClose={onClose} label='Review changes'>
<StyledPageContent
disableBorder={true}
header={<ReviewChangesHeader />}
@ -159,6 +150,6 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
</ChangeRequestPlausibleProvider>
))}
</StyledPageContent>
</DynamicSidebarModal>
</SidebarModal>
);
};