Update documentation padding on mobile devices (#8318)

close #8086 

- Technical explanation of the issue
The mobile documentation pages have a fixed width of `340px`, regardless
of the device. And they are centered horizontally, so the horizontal
padding is determined automatically.

- Explanation of the fix
I've updated the styling of those pages to use fixed padding `32px`
instead and let it determine the width (`deviceWidth - 64px`).
    
- Screenshots
    
![CleanShot 2024-11-04 at 15 01
59](https://github.com/user-attachments/assets/d2ecf215-cbee-4ea0-b627-53ac756095bc)
![CleanShot 2024-11-04 at 15 02
23](https://github.com/user-attachments/assets/bb03854f-17ee-43dc-bba2-feeddc6a2750)

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-website/src/app/_components/docs/DocsContent.tsx

@@ -1,8 +1,8 @@
 'use client';
-import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
+import { useState } from 'react';
 
 import { ArticleContent } from '@/app/_components/ui/layout/articles/ArticleContent';
 import { Breadcrumbs } from '@/app/_components/ui/layout/Breadcrumbs';
@@ -28,8 +28,7 @@ const StyledContainer = styled('div')`
 
 const StyledWrapper = styled.div`
   @media (max-width: 450px) {
-    padding: ${Theme.spacing(10)} 30px ${Theme.spacing(20)};
-    width: 340px;
+    padding: ${Theme.spacing(10)} 32px ${Theme.spacing(20)};
   }
 
   @media (min-width: 451px) and (max-width: 800px) {

packages/twenty-website/src/app/_components/docs/DocsMain.tsx

@@ -30,9 +30,8 @@ const StyledWrapper = styled.div`
   width: 100%;
 
   @media (max-width: 450px) {
-    padding: ${Theme.spacing(10)} 30px ${Theme.spacing(20)};
+    padding: ${Theme.spacing(10)} 32px ${Theme.spacing(20)};
     align-items: flex-start;
-    width: 340px;
   }
 
   @media (min-width: 450px) and (max-width: 800px) {