From 8e0e9c834e30f727e6f5529790d1223f636d3274 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 4 Jul 2025 13:44:17 +0200
Subject: [PATCH] chore: Use fixed-width sidebar instead of dynamic modal.
 (#10315)

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"
/>
---
 .../ChangeRequestSidebar.tsx                  | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
index dadc379831..0baffc141e 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
@@ -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>
     );
 };