Mobile UI: Misaligned button and dropdown layout in Queues page

[Armaankhaan01]

In mobile view of the Doctor Dashboard → Queues page (/facility/{id}/queues), the layout appears misaligned:

• The "Create First Queue" button is not centered properly.
• The "Selected practitioner" dropdown stretches incorrectly and occupies more width than intended.
• Overall spacing appears broken in mobile resolution.

---

To Reproduce

1. Login as Doctor
2. Navigate to Queues from the sidebar
3. Switch to mobile view (DevTools or small screen device)
4. Observe layout misalignment

---

Expected behavior

• The button should be centered horizontally.
• The dropdown should follow responsive width constraints.
• The layout should align properly on mobile screens.

---

Screenshots

Attach your screenshot.

---

Desktop

• OS: Windows
• Browser: Chrome
• Version: (your version)

---

Additional context

Tested locally on localhost:4000.

[Armaankhaan01]

I have reproduced this issue locally.
It appears to be caused by improper responsive layout handling in the mobile view.

I plan to:

• Adjust flex direction for mobile breakpoints.
• Ensure the select dropdown uses responsive width (w-full where appropriate)
• Center the button using proper alignment utilities.
• Verify that desktop layout remains unaffected.

This will be a UI-only change without affecting business logic.

[8sami]

please refrain from opening a PR until an issue is reviewed and assigned to you

[8sami]

you aren't supposed to edit the text that was saying "🚨 DO NOT EDIT BELOW THIS LINE 🚨"