[UI] fix(docs): prevent wide code blocks from pushing sidebar off-screen#1150
[UI] fix(docs): prevent wide code blocks from pushing sidebar off-screen#1150KumarNirupam1 wants to merge 2 commits into
Conversation
…ing blocks Signed-off-by: Kumar Nirupam <kumar.nirupam24@gmail.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces layout and overflow improvements in SCSS files, adding 'min-width: 0' to the main content container and 'overflow-x: auto' with 'max-width: 100%' to preformatted blocks and '.highlight' containers to handle horizontal overflow. The reviewer suggested resetting 'overflow-x' to 'visible' on 'pre' elements nested inside '.highlight' to prevent potential redundant or double scrollbars in some browsers.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
🚀 Preview deployment: https://docs.layer5.io/pr-preview/pr-1150/
|
Signed-off-by: Kumar Nirupam <kumar.nirupam24@gmail.com>
|
@Sbragul26 kindly review 🙂 |
|
LGTM! |
2 participants
Description
PR fixes : #1147
On the SMTP guide (
/cloud/guides/self-hosted/operating/smtp/), long log and code blocks were expanding the main content column past the viewport. That pushed the right "On this page" sidebar off-screen and required horizontal scrolling to read the page inconsistent with other docs pages.This PR applies a minimal CSS-only fix:
min-width: 0to.row > mainso the flex column can shrink within the layout instead of growing with wide content.overflow-x: autoandmax-width: 100%to.td-content preand.td-content .highlightso long lines scroll inside the code block instead of stretching the page.No markdown, HTML, or JS changes. The SMTP page exposed the issue, but the fix applies globally to any page with long code blocks.
Screenshot/video
Screen.Recording.2026-07-11.102218.mp4
Signed commits