Feature: Mobile optimization

[Manastirski]

Description

All of our current frontend components are not optimized for mobile screens. This leads to layout shifts, poor user experience (UX), and difficult navigation on smaller viewports.

We need to review and refine our styles/components to ensure they are fully responsive and touch-friendly.

To-Do List

• Component Audit: Identify critical components that break or look misaligned on smaller viewports (e.g., navigation, tables, cards).
• Responsive Design: Optimize breakpoints and ensure we are utilizing a mobile-first approach where appropriate.
• Touch Targets: Ensure buttons, links, and interactive elements are easy to tap (recommended minimum size of 44x44px).
• Testing: Verify component behavior across various screen sizes using browser DevTools and, if possible, physical mobile devices.

Acceptance Criteria

• All core components render correctly on viewports below 480px.
• No unexpected horizontal scrolling (overflow issues).
• Interactive elements are easily clickable and accessible on touchscreens.