From 50f97469638b9866c7e1e727f5460ec6c45f232e Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Fri, 18 Nov 2022 10:28:29 +0100
Subject: [PATCH] older safari does not support gap (#2470)

---
 .../ChangeRequestComments/AddCommentField.tsx               | 1 -
 .../ChangeRequestComments/ChangeRequestComment.tsx          | 1 -
 .../ChangeRequestComments/StyledAvatar.tsx                  | 1 +
 .../ChangeRequestFeatureToggleChange.tsx                    | 3 +--
 .../ChangeRequestHeader/ChangeRequestHeader.styles.tsx      | 6 +++---
 5 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx
index 5af6441d2c..135198a5e4 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx
@@ -4,7 +4,6 @@ import { StyledAvatar } from './StyledAvatar';
 
 const AddCommentWrapper = styled(Box)(({ theme }) => ({
     display: 'flex',
-    gap: theme.spacing(2),
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(1),
 }));
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
index df2e6c800b..b9b20a37b1 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
@@ -7,7 +7,6 @@ import { IChangeRequestComment } from '../../changeRequest.types';
 
 const ChangeRequestCommentWrapper = styled(Box)(({ theme }) => ({
     display: 'flex',
-    gap: theme.spacing(2),
     marginTop: theme.spacing(2),
 }));
 const CommentPaper = styled(Paper)(({ theme }) => ({
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx
index 5aa775b090..2efa8c099c 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/StyledAvatar.tsx
@@ -4,4 +4,5 @@ export const StyledAvatar = styled(Avatar)(({ theme }) => ({
     height: '30px',
     width: '30px',
     marginTop: theme.spacing(1),
+    marginRight: theme.spacing(2),
 }));
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx
index b90d64a052..85f1165354 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx
@@ -56,7 +56,6 @@ export const ChangeRequestFeatureToggleChange: FC<
             <Box
                 sx={{
                     display: 'flex',
-                    gap: 1,
                     pt: conflict ? 0 : 2,
                     pb: 2,
                     px: 3,
@@ -67,7 +66,7 @@ export const ChangeRequestFeatureToggleChange: FC<
                     component={Link}
                     to={`/projects/${projectId}/features/${featureName}`}
                     color="primary"
-                    sx={{ textDecoration: 'none' }}
+                    sx={{ textDecoration: 'none', marginLeft: 1 }}
                     onClick={onNavigate}
                 >
                     {featureName}
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
index b0bdb15509..e8224eaf44 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
@@ -9,14 +9,12 @@ export const StyledPaper = styled(Paper)(({ theme }) => ({
 export const StyledContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    gap: 2,
     marginBottom: theme.spacing(2),
 }));
 
 export const StyledInnerContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    gap: theme.spacing(1.5),
 }));
 
 export const StyledHeader = styled(Typography)(({ theme }) => ({
@@ -31,7 +29,9 @@ export const StyledCard = styled(Card)(({ theme }) => ({
     backgroundColor: theme.palette.tertiary.light,
 }));
 
-export const StyledAvatar = styled(Avatar)(() => ({
+export const StyledAvatar = styled(Avatar)(({ theme }) => ({
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     height: '30px',
     width: '30px',
 }));