Fix code block width overflow causing navigation menu to shrink #472

[DhanashreePetare]

Summary

Fixes #472 - Code blocks with very long lines now scroll horizontally instead of expanding the entire page width, which was causing the navigation menu to become excessively narrow.

Problem

Code blocks containing long lines (e.g., lengthy git commands or URLs) were expanding beyond the content area, causing:

• Navigation menu to be squeezed into a very narrow column
• Poor rendering on mobile screens
• Horizontal scrolling required for the entire page

This was particularly noticeable in Rev News editions 66 and 68.

Solution

Modified CSS for pre and pre.sh_sourceCode elements to:

• Changed white-space: pre-wrap to white-space: pre (prevents line wrapping)
• Added overflow-x: auto (enables horizontal scrolling within code blocks only)
• Added max-width: 100% (constrains code blocks to content width)

Key Improvements Over Previous Attempt (#668)

• ✅ No font size changes - readability maintained across all screen sizes
• ✅ Only affects code blocks - no impact on other page elements
• ✅ Minimal, focused CSS changes (6 lines added/modified)
• ✅ Works seamlessly on desktop and mobile devices

Files Changed

• css/main.css - Updated code block styling (7 lines modified)

[mjaix]

Hi @DhanashreePetare,
looking at editions 66 and 68 both with Firefox 146.0 on my Linux desktop and Chrome on my Android phone, I fail to see the problem you intend to fix.
Can you provide detailed hints?
Best regards, Markus

[DhanashreePetare]

Hi @DhanashreePetare, looking at editions 66 and 68 both with Firefox 146.0 on my Linux desktop and Chrome on my Android phone, I fail to see the problem you intend to fix. Can you provide detailed hints? Best regards, Markus

Hi @mjaix (Markus),

Thank you for taking the time to review this PR!

The issue may not be immediately visible on all pages since it specifically occurs when code blocks contain exceptionally long lines that exceed the normal content width. Let me provide specific examples:

Steps to Reproduce the Issue (Without This Fix)

1. Check edition 66 - Look for the section "Support" → "How can I search git log..."

   • The code blocks with long git commands should extend beyond normal width
   • On narrower viewports (< 1200px), this causes the navbar to compress

2. Check edition 68 - The "Apply Git bundle to source tree?" section

   • Contains git bundle commands that are quite long

3. Best way to see the problem:

   • Open browser DevTools (F12)
   • Inspect a code block with a long line
   • Check the computed width - it should extend beyond the parent .site container's max-width of 700px
   • The navbar gets compressed due to flexbox layout trying to accommodate the wide content

The Original Issue Report

This fix addresses the concern raised by @mjaix in the original issue #472:

"I tried to understand why https://git.github.io/rev_news/2020/08/27/edition-66/, https://git.github.io/rev_news/2020/10/30/edition-68/, and the actual Rev News have a formatting which results in a very slim left menu column."

As @jnareb explained: "66 and 68 edition has a very slim left menu column because the contents column is exceedingly wide due to overly long line in the code block."

What This PR Changes

Before: Long lines in code blocks cause the entire content area to expand, squishing the navbar.
After: Long lines stay within the content width and become horizontally scrollable within the code block itself.

Testing on Your Setup

If the issue isn't visible on your current browser window size, try:

1. Reducing browser window width to ~1000-1200px
2. Opening editions with the longest code examples
3. Looking at the navbar width relative to content width

Hope it helps.