From 545cfbd83ec46621a976e2b886dedd7d6b94a524 Mon Sep 17 00:00:00 2001
From: khuddite <khuddite@gmail.com>
Date: Thu, 7 Nov 2024 02:50:20 -0500
Subject: [PATCH] Update documentation padding on mobile devices (#8318)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                   | 13 ++++++++++---
 .../src/app/_components/docs/DocsContent.tsx        |  5 ++---
 .../src/app/_components/docs/DocsMain.tsx           |  3 +--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-website/README.md b/packages/twenty-website/README.md
index 5388a93c8..cb971d19f 100644
--- a/packages/twenty-website/README.md
+++ b/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
-nx run twenty-website:start
+npx nx run twenty-website:build
+npx nx run twenty-website:start
 ```
\ No newline at end of file
diff --git a/packages/twenty-website/src/app/_components/docs/DocsContent.tsx b/packages/twenty-website/src/app/_components/docs/DocsContent.tsx
index 5d4c6c926..50710cf53 100644
--- a/packages/twenty-website/src/app/_components/docs/DocsContent.tsx
+++ b/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) {
diff --git a/packages/twenty-website/src/app/_components/docs/DocsMain.tsx b/packages/twenty-website/src/app/_components/docs/DocsMain.tsx
index 1d98ad450..2cc9112ea 100644
--- a/packages/twenty-website/src/app/_components/docs/DocsMain.tsx
+++ b/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) {