From ff77f85aeed4211230bb3a9a5c7b144245874ae4 Mon Sep 17 00:00:00 2001
From: Khuddite <62555977+khuddite@users.noreply.github.com>
Date: Mon, 11 Nov 2024 03:32:00 -0500
Subject: [PATCH] Fix broken documentation pages in mobile view (#8432)

Fixes: #8396

1. Summary
The document content container is missing `width` and has only `padding`
CSS property, which means the width can overflow its parent based on the
content. The code block inside headings was missing `fontSize` for
mobile view, it was set for only desktop views.

2. Solution
I set `width` for document content container and `fontSize` for code
blocks in headings for mobile view.

3. Screenshots

![localhost_3000_developers_local-setup(iPad
Mini)](https://github.com/user-attachments/assets/4adf695f-3849-4ddc-8629-be03a70d32b1)
![localhost_3000_developers(iPhone 12
Pro)](https://github.com/user-attachments/assets/52254b3a-674b-4db0-9e6c-a68d59cb4401)
---
 .../src/app/_components/docs/DocsContent.tsx              | 1 +
 .../app/_components/ui/layout/articles/ArticleContent.tsx | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/twenty-website/src/app/_components/docs/DocsContent.tsx b/packages/twenty-website/src/app/_components/docs/DocsContent.tsx
index 50710cf534a9..f59186441c97 100644
--- a/packages/twenty-website/src/app/_components/docs/DocsContent.tsx
+++ b/packages/twenty-website/src/app/_components/docs/DocsContent.tsx
@@ -28,6 +28,7 @@ const StyledContainer = styled('div')`
 
 const StyledWrapper = styled.div`
   @media (max-width: 450px) {
+    width: 100%;
     padding: ${Theme.spacing(10)} 32px ${Theme.spacing(20)};
   }
 
diff --git a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx
index c337be0bd1c6..2c848c32a2e5 100644
--- a/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx
+++ b/packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx
@@ -105,6 +105,14 @@ const StyledContent = styled.div`
     h4 {
       font-size: 16px;
     }
+    h1,
+    h2,
+    h3,
+    h4 {
+      code {
+        font-size: 16px;
+      }
+    }
   }
 
   ol {