fix: align UserColumns labels with content cards

[Jayant-Sharma-Dev]

What

Labels in UserColumns (used on the user profile page) were vertically stretching to match their content card's height instead of aligning naturally, making shorter cards like "Contact Information" look visually disconnected from their label.

Fix

Added sm:items-center to the flex container in UserColumns.tsx so labels align with their cards on desktop, without affecting the mobile stacked layout.

Screenshots

Before:

After (desktop):

Merge Checklist

• Add specs that demonstrate the bug or test the new feature.
• Update product documentation.
• Ensure that UI text is placed in I18n files.
• Prepare a screenshot or demo video for the changelog entry and attach it to the issue.
• Request peer reviews.
• Complete QA on mobile devices.
• Complete QA on desktop devices.
• Add or update Playwright tests for related changes

Summary by CodeRabbit

• Style
  • Improved responsive alignment for user information sections on small screens.
  • Updated facility map links to better fit their content while preserving existing icon and text alignment.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[github-actions]

⚠️ Merge Checklist Incomplete

Thank you for your contribution! To help us review your PR efficiently, please complete the merge checklist in your PR description.

Your PR will be reviewed once you have marked the appropriate checklist items.

To update the checklist:

• Change - [ ] to - [x] for completed items
• Only check items that are relevant to your PR
• Leave items unchecked if they don't apply

The checklist helps ensure code quality, testing coverage, and documentation are properly addressed.

[coderabbitai]

Walkthrough

Changes

Responsive UI styling

Layer / File(s)	Summary
Component alignment and link sizing src/components/Common/UserColumns.tsx, src/components/Facility/FacilityMapLink.tsx	UserColumns adds sm:items-center, and FacilityMapsLink adds w-fit to its link styling.

Possibly related PRs

• ohcnetwork/care_fe#16545: Directly addresses the same FacilityMapLink w-fit clickable-area change.
• ohcnetwork/care_fe#16581: Contains the same FacilityMapLink class update, while the UserColumns change is unrelated.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title accurately summarizes the main change: aligning UserColumns labels with their content cards.
Description check	✅ Passed	The description clearly explains the problem, the fix, screenshots, and checklist items, so it is mostly complete.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[greptile-apps]

Greptile Summary

Aligns user profile labels with their content cards on desktop and sizes facility map links to their content width.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failures remain.

Important Files Changed

Filename	Overview
src/components/Common/UserColumns.tsx	Adds responsive cross-axis centering to desktop user profile rows without changing the mobile stacked layout.
src/components/Facility/FacilityMapLink.tsx	Constrains the map link container to its content width while preserving icon and text alignment.

_{Reviews (2): Last reviewed commit: "fix: align UserColumns label with card c..." | Re-trigger Greptile}