Bug: Adjust organization users cards for Tablet

[Tanuj1718]

Describe the bug
Content in cards are overlapping and text is overflowing out of the card.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://care.ohc.network/organization/76f8a81d-04e7-43ee-852f-1757c538b295/users
2. Check in tablet view

Expected behavior
Text should not overlap each other and it should not flow out of the card.

Screenshots

---

🚨 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.

[Tanuj1718]

@rithviknishad @Jacobjeevan if it is valid, i would like to fix it

ETA: 14 March

[Gurdeep75way]

Comment on Issue #11272 – Adjust Organization Users Cards for Tablet

Hi @rithviknishad, @Jacobjeevan,

I would like to work on this issue. Here’s my proposed solution:

Proposed Solution:
Adjust CSS styles – Ensure that the text inside the user cards is wrapped properly using word-wrap: break-word;, overflow: hidden;, and text-overflow: ellipsis where necessary.
Responsive Design Fixes – Implement proper flex/grid adjustments and media queries to optimize card layout for tablet screens.
Testing & Verification – Test across multiple screen sizes (both portrait and landscape tablet views) to confirm the fix works as expected.
Expected Timeline:
I can submit a pull request by March 14th or earlier.

Please assign me this task if everything looks good. Looking forward to contributing!

Best,
Gurdeep Singh

[AlbinKShaji]

I would like to work on it
Solution:
Modify the CSS code to adjust the width, padding, margin, border. Ensures that text doesn’t wrap, hides any overflowing
text, and adds ellipses to indicate overflow.
Use JS to check if the text overflows and adjusts the text content accordingly.
Expected Timeline:
16th March 2025