(SP: 2) [Frontend] Responsive Category Selector for Quizzes & Q&A (Tabs → Select on Mobile)

[ViktorSvertoka]

Goal

Improve category navigation on Quizzes and Q&A pages by implementing a responsive category selector:

• Tabs for desktop & tablet
• Select (dropdown) for mobile devices

This approach ensures good UX and scalability when the number of categories grows (e.g. 50–100+).

Scope

Shared Component

• Create a reusable CategorySelector component used on:
  • Quizzes page
  • Q&A page

Responsive Behavior

• Desktop & Tablet: horizontal category tabs
• Mobile: select / dropdown instead of tabs

Category Handling

• Categories must be:
  • Scrollable and overflow-safe on desktop
  • Fully accessible on mobile without horizontal scrolling
• The solution must support a large number of categories (100+) without UI degradation

Active State

• Active category must:
  • Be clearly visible in the UI
  • Stay in sync with the currently displayed page content

Accessibility & UI

• Ensure:
  • Keyboard accessibility
  • Proper focus states
  • Full dark theme compatibility