From b9f55a3fbc63248fd2d3919fe2fb87187ab93293 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 9 Nov 2022 16:50:48 +0100
Subject: [PATCH] fix sidebar width (#2359)

---
 .../ChangeRequestSidebar.tsx                  | 19 ++++++++---
 .../common/SidebarModal/SidebarModal.tsx      | 34 +++++++++++++++----
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
index 6c2ad8c645..fb291f32d7 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
@@ -10,7 +10,7 @@ import {
     useTheme,
 } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
+import { DynamicSidebarModal } from 'component/common/SidebarModal/SidebarModal';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { CheckCircle, HelpOutline } from '@mui/icons-material';
@@ -31,6 +31,7 @@ interface IChangeRequestSidebarProps {
 const StyledPageContent = styled(PageContent)(({ theme }) => ({
     height: '100vh',
     overflow: 'auto',
+    minWidth: '50vw',
     padding: theme.spacing(7.5, 6),
     [theme.breakpoints.down('md')]: {
         padding: theme.spacing(4, 2),
@@ -147,7 +148,11 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
 
     if (!loading && !draft) {
         return (
-            <SidebarModal open={open} onClose={onClose} label="Review changes">
+            <DynamicSidebarModal
+                open={open}
+                onClose={onClose}
+                label="Review changes"
+            >
                 <StyledPageContent
                     header={
                         <PageHeader
@@ -160,12 +165,16 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                     {/* FIXME: empty state */}
                     <BackButton onClick={onClose}>Close</BackButton>
                 </StyledPageContent>
-            </SidebarModal>
+            </DynamicSidebarModal>
         );
     }
 
     return (
-        <SidebarModal open={open} onClose={onClose} label="Review changes">
+        <DynamicSidebarModal
+            open={open}
+            onClose={onClose}
+            label="Review changes"
+        >
             <StyledPageContent
                 header={
                     <PageHeader
@@ -343,6 +352,6 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                     </Box>
                 ))}
             </StyledPageContent>
-        </SidebarModal>
+        </DynamicSidebarModal>
     );
 };
diff --git a/frontend/src/component/common/SidebarModal/SidebarModal.tsx b/frontend/src/component/common/SidebarModal/SidebarModal.tsx
index 59d9813bf7..c40fc7361f 100644
--- a/frontend/src/component/common/SidebarModal/SidebarModal.tsx
+++ b/frontend/src/component/common/SidebarModal/SidebarModal.tsx
@@ -1,13 +1,14 @@
-import { ReactNode } from 'react';
+import { ReactNode, FC } from 'react';
 import { Modal, Backdrop, styled } from '@mui/material';
 import Fade from '@mui/material/Fade';
 import { SIDEBAR_MODAL_ID } from 'utils/testIds';
+import * as React from 'react';
 
 interface ISidebarModalProps {
     open: boolean;
     onClose: () => void;
     label: string;
-    children: ReactNode;
+    children: React.ReactElement<any, any>;
 }
 
 const TRANSITION_DURATION = 250;
@@ -19,17 +20,20 @@ const ModalContentWrapper = styled('div')({
     bottom: 0,
     height: '100vh',
     maxWidth: '98vw',
-    width: 1300,
     overflow: 'auto',
     boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)',
 });
 
-export const SidebarModal = ({
+const FixedWidthContentWrapper = styled(ModalContentWrapper)({
+    width: 1300,
+});
+
+export const BaseModal: FC<ISidebarModalProps> = ({
     open,
     onClose,
     label,
     children,
-}: ISidebarModalProps) => {
+}) => {
     return (
         <Modal
             open={open}
@@ -41,8 +45,26 @@ export const SidebarModal = ({
             data-testid={SIDEBAR_MODAL_ID}
         >
             <Fade timeout={TRANSITION_DURATION} in={open}>
-                <ModalContentWrapper>{children}</ModalContentWrapper>
+                {children}
             </Fade>
         </Modal>
     );
 };
+
+export const SidebarModal: FC<ISidebarModalProps> = props => {
+    return (
+        <BaseModal {...props}>
+            <FixedWidthContentWrapper>
+                {props.children}
+            </FixedWidthContentWrapper>
+        </BaseModal>
+    );
+};
+
+export const DynamicSidebarModal: FC<ISidebarModalProps> = props => {
+    return (
+        <BaseModal {...props}>
+            <ModalContentWrapper>{props.children}</ModalContentWrapper>
+        </BaseModal>
+    );
+};