scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-30 12:22:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix broken documentation pages in mobile view (#8432)

Browse Source 
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)
This commit is contained in:
Khuddite
2024-11-11 03:32:00 -05:00
committed by GitHub
parent 29d92abaff
commit ff77f85aee
2 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,6 +28,7 @@ const StyledContainer = styled('div')`
const StyledWrapper = styled.div` const StyledWrapper = styled.div`
@media (max-width: 450px) { @media (max-width: 450px) {
width: 100%;
padding: ${Theme.spacing(10)} 32px ${Theme.spacing(20)}; padding: ${Theme.spacing(10)} 32px ${Theme.spacing(20)};
} }

8
packages/twenty-website/src/app/_components/ui/layout/articles/ArticleContent.tsx
View File

@@ -105,6 +105,14 @@ const StyledContent = styled.div`
h4 { h4 {
font-size: 16px; font-size: 16px;
} }
h1,
h2,
h3,
h4 {
code {
font-size: 16px;
}
}
} }
ol { ol {