fix: align user profile section labels

[Jayant-Sharma-Dev]

Proposed Changes

Fixes #16599

• Added sm:items-center to the flex container's className in UserColumns.tsx.
• This aligns the label column with its card naturally instead of stretching to match the card's height, since the container previously relied on the default align-items: stretch.
• Only applies at the sm: breakpoint and above, so the mobile stacked layout (flex-col) is unaffected.

Before:

After:

Tagging: @ohcnetwork/care-fe-code-reviewers

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 layout alignment so items are vertically centered on small screens and larger.

[Copilot]

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 06dd60b6-9ef8-423e-8102-8fc1e5b6e827

📥 Commits

Reviewing files that changed from the base of the PR and between 2ea00b1 and 47d760b.

📒 Files selected for processing (1)

• src/components/Common/UserColumns.tsx

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

Walkthrough

Changes

User profile layout

Layer / File(s)	Summary
Responsive section alignment src/components/Common/UserColumns.tsx	The flex container adds sm:items-center to align section labels with content cards from the sm breakpoint upward. The mobile stacked layout remains unchanged.

Possibly related PRs

• ohcnetwork/care_fe#16596: Makes the same sm:items-center change in UserColumns.tsx.
• ohcnetwork/care_fe#16597: Adds the same responsive alignment class to UserColumns.tsx.
• ohcnetwork/care_fe#16710: Applies the same UserColumns.tsx alignment change.

Suggested reviewers: amjithtitus09, jacobjeevan

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The change directly implements issue #16599 by adding sm:items-center to align labels with their cards.
Out of Scope Changes check	✅ Passed	The pull request contains only the requested one-line layout change in UserColumns.tsx.
Title check	✅ Passed	The title clearly summarizes the main UI alignment fix in the user profile section.
Description check	✅ Passed	The description explains the change, affected breakpoints, issue, screenshots, and completed mobile and desktop QA.

✨ 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.}

[github-actions]

🚀 Preview Deployment Ready!

🔗 Preview URL: https://pr-16721.care-preview-a7w.pages.dev

📱 Mobile Access:
Scan the QR code below to open the preview on your mobile device.

---

This preview will be automatically updated when you push new commits to this PR.

[github-actions]

🎭 Playwright Test Results

Status: ✅ Passed
Test Shards: 3

Metric	Count
Total Tests	239
✅ Passed	239
❌ Failed	0
⏭️ Skipped	0

📊 Detailed results are available in the playwright-final-report artifact.

_{Run: #10971}

[nihal467]

The PR does not address the issue raised in the ticket. The contact information on the left and right sides should be aligned on the same line, but in the current PR, they are displayed on separate lines.