fix: Fix mobile horizontal scroll caused by code blocks

[nafasebra]

Problem

The documentation site had horizontal scrolling on mobile devices caused by code blocks (<pre> and <code> elements) overflowing beyond the viewport width.

Solution

Added CSS rules to custom.css.scss to:

• Contain code blocks within viewport boundaries using max-width: 100%
• Enable horizontal scrolling only within code blocks using overflow-x: auto
• Prevent page-level horizontal scroll with overflow-x: hidden on body elements

Changes

• Modified source/stylesheets/custom.css.scss
• Added responsive styles for pre and code elements
• Added mobile-specific media queries for better code block handling

Testing

• ✅ Verified on mobile viewport (< 768px) using browser DevTools
• ✅ Code blocks now scroll independently
• ✅ No horizontal scroll on page level
• ✅ Desktop view remains unchanged

Note

This is my first contribution to a Ruby project. Due to internet connectivity issues, I wasn't able to run bundle install and test locally with the full development environment. The fix was verified using browser DevTools CSS injection and should work correctly once deployed.

In mobile size:

In desktop:

Fixes responsive layout issues for mobile users.