Issue Title: UI Components Lose Readability on Narrow Screens

[eccentriccoder01]

On smaller screens or when the browser window is narrowed, the UI components, such as buttons and text fields, shrink horizontally instead of stacking vertically. This makes the text on the buttons unreadable and the application difficult to use.

Steps to Reproduce:

1. Open the TalkHeal application in a web browser.
2. Slowly resize the browser window to a narrower width, simulating a mobile device or tablet.
3. Observe the buttons and other components shrinking in width, causing their text to be truncated or compressed.

Expected Behavior:
The components should maintain a minimum readable width and, once the screen is too narrow to display them side-by-side, they should "stack" or wrap to the next line. The horizontal columns should switch to a vertical layout at a certain screen size breakpoint, ensuring all content remains readable.

[github-actions]

Thank you for raising this issue!

We'll review it as soon as possible. We truly appreciate your contributions! ✨

Meanwhile make sure you've visited the README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md before creating a PR for this. Also, please do NOT create a PR until this issue has been assigned to you. 😊

[Kavlin-Kaur]

Hello sir, please can u assign this to me

[eccentriccoder01]

Hello sir, please can u assign this to me

Sure Kavlin, thanks for taking this issue up❕