Skip to content

Improve mobile filter layout and add "Back to Top" scrolling aid #35

@PrathamRanka

Description

@PrathamRanka

Description

Currently, on mobile devices, the filter buttons in ProgramList.tsx ("Work Mode", "Compensation", "Eligibility") stack vertically and consume a massive amount of screen real estate. This pushes the actual program cards below the fold, leading to a poor user experience. Additionally, as the list of programs grows, mobile users have to scroll a long way back up to reach the search bar.

Acceptance Criteria

  • Refactor the inline filter buttons into a responsive, collapsible filter menu. On desktop, they can remain as they are, but on mobile (md:hidden), they should be contained within a Drawer or Accordion component from shadcn/ui.
  • Implement a floating "Back to Top" arrow button that becomes visible fixed in the bottom right corner only after the user has scrolled past a certain Y offset.
  • Ensure clicking the "Back to Top" button smoothly scrolls the window back to 0.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions