feat: adjust change request banner for new layout (#7160)

frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx

@@ -6,6 +6,7 @@ import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequ
 import type { ChangeRequestType } from 'component/changeRequest/changeRequest.types';
 import { changesCount } from 'component/changeRequest/changesCount';
 import { Sticky } from 'component/common/Sticky/Sticky';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IDraftBannerProps {
     project: string;
@@ -17,7 +18,7 @@ const StyledDraftBannerContentWrapper = styled(Box)(({ theme }) => ({
     padding: theme.spacing(1, 0),
 }));
 
-const StyledDraftBanner = styled(Box)(({ theme }) => ({
+const OldStyledDraftBanner = styled(Box)(({ theme }) => ({
     maxWidth: '1512px',
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
@@ -33,10 +34,26 @@ const StyledDraftBanner = styled(Box)(({ theme }) => ({
     },
 }));
 
+const StyledDraftBanner = styled(Box)(({ theme }) => ({
+    width: '100%',
+    paddingLeft: theme.spacing(3),
+    paddingRight: theme.spacing(9),
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    [theme.breakpoints.down(1024)]: {
+        marginLeft: 0,
+        marginRight: 0,
+    },
+    [theme.breakpoints.down('sm')]: {
+        minWidth: '100%',
+    },
+}));
+
 const DraftBannerContent: FC<{
     changeRequests: ChangeRequestType[];
     onClick: () => void;
 }> = ({ changeRequests, onClick }) => {
+    const sidebarNavigationEnabled = useUiFlag('navigationSidebar');
     const environments = changeRequests.map(({ environment }) => environment);
     const allChangesCount = changeRequests.reduce(
         (acc, curr) => acc + changesCount(curr),
@@ -54,8 +71,12 @@ const DraftBannerContent: FC<{
           }[changeRequests[0].state as 'Draft' | 'In review' | 'Approved']
         : '';
 
+    const Banner = sidebarNavigationEnabled
+        ? StyledDraftBanner
+        : OldStyledDraftBanner;
+
     return (
-        <StyledDraftBanner>
+        <Banner>
             <StyledDraftBannerContentWrapper>
                 <Typography variant='body2' sx={{ mr: 4 }}>
                     <strong>Change request mode</strong> – You have changes{' '}
@@ -91,7 +112,7 @@ const DraftBannerContent: FC<{
                     View changes ({allChangesCount})
                 </Button>
             </StyledDraftBannerContentWrapper>
-        </StyledDraftBanner>
+        </Banner>
     );
 };