Bug: Home Page Content Overflows on Small Screens Due to Minimum Width Constraint

[edwinperaza99]

Bug Report

Steps to Reproduce:

1. Open the project’s documentation site on a small-screen device (e.g., mobile viewport < 500px width).
2. Observe that the content is no longer centered; elements appear cut off as if extending beyond the screen.
3. There is no horizontal scrolling because overflow: hidden; is applied, but the content itself is pushed outside the viewport.
4. Inspect the body element in DevTools and notice that a min-width property is applied from base.css, preventing the page from properly resizing.

Expected Result:

• The page should fully scale down to fit within the viewport width.
• The main content, including the SVG logo and other elements, should remain properly centered and responsive.

Actual Result:

• The homepage content is misaligned and cut off on small screens.
• Because overflow: hidden; is applied, users cannot manually scroll to view the missing content.
• Inspecting with browser dev tools shows that min-width is preventing proper responsiveness.

Environment:

• Where Issue Occurred: Live website of the project's documentation
• Tested On:
  • iPhone 14 Pro Max (Safari)
  • iPhine 12 (Safari)
  • macOS (Chrome DevTools with viewport resizing)

Additional Context:

While exploring job postings, I came across one that mentioned this repository as part of the role’s responsibilities. Curious to learn more about the project, I explored the documentation and accessed the website on my phone. I then noticed that some content wasn’t properly centered. Inspecting the styles, I found that a min-width constraint in base.css was preventing the page from fully adapting to smaller screens. Given how important responsive design is, I wanted to contribute a fix to improve the experience for mobile users.

Suggested Fix:

Adding min-width: 0; to the body CSS resolves the issue and allows the page to properly scale on smaller screens without modifying the styles on base.css.