From 8736189b4feeb3c3c2eb0de686b05ec02d2c7701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 4 Jan 2024 09:57:30 +0000
Subject: [PATCH] fix: UI improvements related to the increase of width (#5752)

https://linear.app/unleash/issue/UNL-309/1500px-width-ui-issues

UI fixes, improvements and adjustments related to the recent increase in
width on the UI. Tried to follow the feature flag logic wherever it made
sense.


![image](https://github.com/Unleash/unleash/assets/14320932/b5b4f437-c232-4025-ab24-09070a036592)


![image](https://github.com/Unleash/unleash/assets/14320932/e9008e3b-db5c-4553-bd7d-58a01120433d)


Co-authored-by: Nicolae <nicolae@getunleash.ai>
---
 .../IntegrationList.styles.tsx                |  2 +-
 .../MainLayout/DraftBanner/DraftBanner.tsx    | 45 ++++++++++++++++---
 .../layout/MainLayout/MainLayout.tsx          |  2 +-
 frontend/src/component/menu/Header/Header.tsx |  2 +-
 4 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationList.styles.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationList.styles.tsx
index 8933b681d6..0e52d2293d 100644
--- a/frontend/src/component/integrations/IntegrationList/IntegrationList.styles.tsx
+++ b/frontend/src/component/integrations/IntegrationList/IntegrationList.styles.tsx
@@ -3,7 +3,7 @@ import { styled } from '@mui/material';
 export const StyledCardsGrid = styled('div')<{ small?: boolean }>(
     ({ theme, small = false }) => ({
         gridTemplateColumns: `repeat(auto-fill, minmax(${
-            small ? '250px' : '350px'
+            small ? '280px' : '350px'
         }, 1fr))`,
         gridAutoRows: '1fr',
         gap: theme.spacing(2),
diff --git a/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx b/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
index 77d2ff6d25..334973c73c 100644
--- a/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
+++ b/frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
@@ -6,12 +6,13 @@ import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequ
 import { IChangeRequest } 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;
 }
 
-const DraftBannerContentWrapper = styled(Box)(({ theme }) => ({
+const StyledNormalDraftBannerContentWrapper = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     padding: theme.spacing(1, 0),
@@ -20,7 +21,13 @@ const DraftBannerContentWrapper = styled(Box)(({ theme }) => ({
     },
 }));
 
-const StyledBox = styled(Box)(({ theme }) => ({
+const StyledSpaciousDraftBannerContentWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(1, 0),
+}));
+
+const StyledNormalDraftBanner = styled(Box)(({ theme }) => ({
     width: '1250px',
     marginLeft: 'auto',
     marginRight: 'auto',
@@ -37,6 +44,22 @@ const StyledBox = styled(Box)(({ theme }) => ({
     },
 }));
 
+const StyledSpaciousDraftBanner = styled(Box)(({ theme }) => ({
+    maxWidth: '1512px',
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    [theme.breakpoints.down(1024)]: {
+        width: '100%',
+        marginLeft: 0,
+        marginRight: 0,
+    },
+    [theme.breakpoints.down('sm')]: {
+        minWidth: '100%',
+    },
+}));
+
 const DraftBannerContent: FC<{
     changeRequests: IChangeRequest[];
     onClick: () => void;
@@ -58,9 +81,19 @@ const DraftBannerContent: FC<{
           }[changeRequests[0].state as 'Draft' | 'In review' | 'Approved']
         : '';
 
+    const increaseUnleashWidth = useUiFlag('increaseUnleashWidth');
+
+    const StyledDraftBanner = increaseUnleashWidth
+        ? StyledSpaciousDraftBanner
+        : StyledNormalDraftBanner;
+
+    const StyledDraftBannerContentWrapper = increaseUnleashWidth
+        ? StyledSpaciousDraftBannerContentWrapper
+        : StyledNormalDraftBannerContentWrapper;
+
     return (
-        <StyledBox>
-            <DraftBannerContentWrapper>
+        <StyledDraftBanner>
+            <StyledDraftBannerContentWrapper>
                 <Typography variant='body2' sx={{ mr: 4 }}>
                     <strong>Change request mode</strong> – You have changes{' '}
                     <ConditionallyRender
@@ -94,8 +127,8 @@ const DraftBannerContent: FC<{
                 >
                     View changes ({allChangesCount})
                 </Button>
-            </DraftBannerContentWrapper>
-        </StyledBox>
+            </StyledDraftBannerContentWrapper>
+        </StyledDraftBanner>
     );
 };
 
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index 89a19da569..88b6085f55 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@@ -56,7 +56,7 @@ const MainLayoutContent = styled(Grid)(({ theme }) => ({
 
 const SpaciousMainLayoutContent = styled(Grid)(({ theme }) => ({
     width: '100%',
-    maxWidth: '1500px',
+    maxWidth: '1512px',
     margin: '0 auto',
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index f081bd0d16..6eff96bc6c 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -54,7 +54,7 @@ const StyledSpaciousHeader = styled(AppBar)(({ theme }) => ({
     boxShadow: 'none',
     position: 'relative',
     zIndex: 300,
-    maxWidth: '1580px',
+    maxWidth: '1512px',
     [theme.breakpoints.down('lg')]: {
         maxWidth: '1280px',
         paddingLeft: theme.spacing(1),