Skip to content

UI/UX: Improve navigation, sticky header, and catalog filtering #4705

@MarkusNeusinger

Description

@MarkusNeusinger

UI/UX Improvements

Several usability improvements identified during a site audit:

1. No sticky header/search bar

  • Current: Search bar and filters scroll out of view when browsing 2200+ plots
  • Expected: Sticky header that keeps search/filter accessible while scrolling
  • Impact: Users lose access to navigation tools on long scroll sessions

2. Missing skip-to-content link

  • Current: No skip link for keyboard/screen reader users
  • Expected: Add <a href="#main-content">Skip to content</a> as the first focusable element
  • File: app/src/components/Layout.tsx

3. Catalog page has no search or filter

  • Current: /catalog shows 256 specifications as a flat list with no filtering
  • Expected: Add search/filter functionality (similar to homepage) or at least category grouping
  • Impact: Hard to find specific plot types in a long unfiltered list

4. Back-to-top button only visible at very bottom

  • Current: Scroll-to-top button appears only at the far bottom-right
  • Expected: Show it earlier (e.g., after scrolling past 2 screen heights) and make it more prominent

5. Footer links have low contrast

  • Current: Small text with low contrast for footer links (github, stats, mcp, legal)
  • Expected: Improve readability with higher contrast or slightly larger font

6. No breadcrumb on homepage

  • Current: Breadcrumbs only on detail pages, not on homepage or catalog
  • Expected: Consistent breadcrumb navigation across all pages

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions