From 52a456a759ec07a14372d6e09dcf9f7a0db3d6e2 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 21 Nov 2024 11:30:37 +0100
Subject: [PATCH] fix: fix status sidebar top padding (#8817)

This PR improves handling of very narrow screens for the project status
header:
- Add a right margin so that it won't overlap with the close button.
- Make it so the icon in the header doesn't shrink.
---
 .../project/Project/ProjectStatus/ProjectStatusModal.tsx        | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
index fd7499a08c..ef06322fb3 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
@@ -36,10 +36,12 @@ const HeaderRow = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1.5),
+    marginInlineEnd: theme.spacing(5), // to account for the close button
 }));
 
 const StyledProjectStatusSvg = styled(ProjectStatusSvg)(({ theme }) => ({
     fill: theme.palette.primary.main,
+    flex: 'none',
 }));
 
 const ModalHeader = styled('h3')(({ theme }) => ({