Navigation sidebar (docs) has poor readability — small font and cramped layout around 910px width

[OmGadge01]

The documentation website’s left navigation sidebar (dark panel showing “Getting Started”, “Elements”, etc.) looks visually unbalanced and hard to read at medium screen widths (~910 px).

At this resolution:

• The font size is too small, making the text difficult to read.
• Line height and spacing between items are tight.
• The contrast between text and background feels low compared to the main content area.

🎯 Goal
Improve the readability and visual hierarchy of the documentation sidebar across different viewport sizes.
This will make the site more accessible, user-friendly, and visually consistent.

💡 Possible solutions

• Increase sidebar font size (e.g., from 12px → 14-15px) and line height for better legibility.
• Add padding/margin between list items to reduce visual density.
• Adjust typography responsively (e.g., via CSS media queries).
• Ensure color contrast meets accessibility standards (WCAG AA).

📋 Steps to solve the problem

1. Inspect the documentation site’s CSS at ~910 px width.
   (https://react.semantic-ui.com/)
2. Locate the sidebar component styles.
3. Apply responsive typography and spacing improvements.
4. Test on multiple screen sizes to ensure consistency.
5. Submit a PR referencing this issue:

🖼️ Screenshot

Environment

• Semantic UI React version: 3.0.0-beta.2
• Browser: Chrome 130
• OS: Windows 11
• Screen width: ~910px

Version
3.0.0-beta.2