Skip to content

Documentation has some UI issues that make it harder to read - I've got fixes ready #258

@gyanranjanpanda

Description

@gyanranjanpanda

Hey! 👋

I've been using the AboutCode docs a lot and noticed some UI issues that make reading harder than it needs to be. Fixed them locally and the difference is pretty noticeable. Thought I'd share!

The Issues

Main problems:

  • Headers are way too big (H1 takes up half the screen)
  • Huge gap between breadcrumbs and content
  • Sidebar creates massive white space when opened
  • Dark mode links are nearly invisible

Other stuff:

  • Cramped sidebar navigation (hard to click on mobile)
  • Lists indented too much
  • Inconsistent bullet styles
  • Content touches screen edges on mobile
  • Theme switcher barely visible

What I Fixed

Rewrote docs/source/_static/theme_overrides.css to fix everything:

  • Reduced header sizes (H1: 3rem → 2.2rem)
  • Fixed sidebar layout and spacing
  • Made dark mode links bright blue (#5ca8ff)
  • Better navigation spacing (0.6em padding)
  • Consistent list indentation (1.5rem)
  • Proper mobile padding

Stats: +368 lines, -8 lines (26 → 386 total)

Testing

Tested on:

  • ✅ Desktop & mobile viewports
  • ✅ Dark/light modes
  • ✅ All main pages
  • ✅ Built with sphinx-autobuild

Ready to PR

Changes are:

  • CSS only (no Python/Sphinx config)
  • Backward compatible
  • Well-commented
  • Already working locally

Questions:

  1. Should I submit the PR?
  2. One big PR or split by category?
  3. Need more browser testing?

Happy to provide screenshots or make adjustments. Let me know! 😊

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions