Layout Overflow on Appointment and Patient Details Pages for Mobile Screens

[modamaan]

Describe the bug
On the Appointment and Add Patient Details pages, layout overflow occurs on mobile screens, causing certain sections of the content to be clipped or hidden beyond the visible area. This affects usability and readability on smaller devices

To Reproduce
Steps to reproduce the behavior:

Click here to reproduce 1

Click here to reproduce 2

See error

Expected behavior
The layout should be fully responsive on mobile screens, ensuring that all content and UI elements are properly visible without overflow

Screenshots

Galaxy Z Fold 5

Desktop (please complete the following information):

• OS: [windows]
• Browser [chrome]
• Version [132.0.6834.111]

Additional context
Add any other context about the problem here.

[modamaan]

@rithviknishad @Jacobjeevan i would like to take it up

[Mahendar0701]

(2) is handled in #10233

[Mahendar0701]

Phone number field country flag button resizing also handled in issue #10233