Appointments List View on mobile is not responsive

[abeeto]

Describe the bug
The list view page for appointments is not responsive:

• each entry doesn't fit the viewport and overflows
• the appointment status tab also doesn't fit and needs horizontal scrolling

Forces the user to scroll horizontally, makes it unable to see all information easily.
To Reproduce
(use a phone)

1. Go to Appointments
2. Click on "List" toggle
3. See error

Expected behavior

• Each appointment should fit in the mobile screen and require no scrolling
• All status filters should be visible/clickable without any scrolling

Recording

screen-20250313-112546.mp4

Smartphone (please complete the following information):

• Device: [Pixel 6]
• OS: [Android]
• Browser [chrome]

Additional context
Add any other context about the problem here.

---

🚨 DO NOT EDIT BELOW THIS LINE 🚨

Instructions for Requesting Assignment:

To request assignment, please clearly outline your solution and timeline by commenting on the issue using the format below:

Describe your solution clearly:
Provide a detailed explanation of your proposed solution, including your approach, key implementation steps, and relevant examples or references. Mention any dependencies, assumptions, or risks you foresee that might affect your timeline or implementation.

Expected Timeline:

• End date: [Expected submission date of a completed Pull Request]

Additional Context:
Include any other relevant context, links, screenshots, or resources that support your proposed solution.

🚨 Your assignment may be unassigned if there is no activity or progress within the stated timeline unless communicated clearly and agreed upon.

[abeeto]

I want to work on this issue if valid.
Instead of using a table and having each appointment as a row for the list view, I think we can use the same cards in "Board" view:

ETA: 1 day after assignment.

[Jacobjeevan]

No, let's not change to cards. Instead allow the table to overflow.