From b0c9b9ebe2331e703ef01992c60ac8d109eb9a17 Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Mon, 16 Sep 2024 21:25:49 +0530
Subject: [PATCH] fix: page header accessible when deleting webhook (#6985)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

This PR resolves the issue #6817

- while deleting webhook, page header is still accessible for both
mobile viewport and large devices
- When creating a webhook, save or cancel state is not accessible due to
page header being overflowed.
- Setting state breaks spaces resulting due to `max-width`

## Current Behaviour


https://github.com/user-attachments/assets/991b29ac-df1b-4250-8c83-444a36148a7f

<img width="430" alt="Screenshot 2024-09-11 at 4 23 51 PM"
src="https://github.com/user-attachments/assets/b2cadd50-7b0d-4b8e-86ff-cffedce65c91">

<img width="427" alt="Screenshot 2024-09-11 at 4 24 12 PM"
src="https://github.com/user-attachments/assets/fcb6dd71-bd3f-4307-82a1-29711688a2e7">

## Expected behavior


https://github.com/user-attachments/assets/cbac0b56-578f-49d5-a092-84f936016ca6

<img width="427" alt="Screenshot 2024-09-11 at 4 24 26 PM"
src="https://github.com/user-attachments/assets/e8eda096-c6d8-4e97-8c0b-44c522567d26">

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
---
 .../twenty-front/src/modules/ui/layout/page/PageHeader.tsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
index 5881e5cb2..28b15ecf8 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
@@ -34,7 +34,9 @@ const StyledTopBarContainer = styled.div<{ width?: number }>`
   width: ${({ width }) => width + 'px' || '100%'};
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
-    padding-left: ${({ theme }) => theme.spacing(3)};
+    width: 100%;
+    box-sizing: border-box;
+    padding: ${({ theme }) => theme.spacing(3)};
   }
 `;