Fix: Responsive Layout - Horizontal Overflow/Clipping on Desktop & Mobile

[dedyf5]

Hello goadesign team,

I'd like to propose and submit a fix for a responsive layout issue affecting the documentation site.

Problem Statement

Currently, the documentation site exhibits the following issues across different screen sizes:

• Desktop View (Existing): The layout horizontally overflows the screen, requiring users to scroll horizontally to view the entire content. This impacts the overall readability and user experience.
• Mobile View (Existing): The layout is horizontally clipped, preventing users from seeing the full content of the page without manual horizontal scrolling or significant parts of the content being cut off.

These issues lead to a suboptimal user experience, as content is not properly contained within the viewport.

Proposed Fix / My Contribution

I have implemented adjustments to the width properties of key layout elements to ensure content fits properly within the screen, improving responsiveness on both desktop and mobile devices. Specifically, I have adjusted the width of:

• The left sidebar (.td-sidebar).
• The right sidebar / Table of Contents (.td-sidebar-toc).
• The main content area (.container-fluid).

These changes ensure that the content and sidebars scale correctly with the viewport, eliminating the need for horizontal scrolling and preventing content clipping.

Impact

This fix improves the usability and accessibility of the documentation across various devices, providing a cleaner and more consistent reading experience.

How I Can Help

I have already implemented and tested these adjustments locally. I am ready to:

• Share the specific CSS/SCSS changes I've made.
• Create a Pull Request (PR) with these changes for your review.

Thank you for your time and consideration. I look forward to your feedback.

[raphael]

Thank you for doing that! A PR would be great!

[dedyf5]

Thank you for the response!
I've opened a Pull Request for the fix here: #176.