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/README.md

@@ -8,14 +8,21 @@ This is not related in anyway to the main app, which you can find in twenty-fron
 
 We're using Next.JS
 
+Copy the .env.example file to .env and fill in the values.
+
+Run the migrations:
+```bash
+npx nx run twenty-website:database:migrate
+```
+
 From the root directory:
 ```bash
-nx run twenty-website:dev
+npx nx run twenty-website:dev
 ```
 Then open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 Or to build in prod:
 ```bash
-nx run twenty-website:build
+npx nx run twenty-website:build
-nx run twenty-website:start
+npx nx run twenty-website:start
 ```

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)};
+    padding: ${Theme.spacing(10)} 32px ${Theme.spacing(20)};
-    width: 340px;
   }
 
   @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) {