fix: page header accessible when deleting webhook (#6985)

## 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>

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)};
   }
 `;