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

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