Fix styling issues in the patient details page

[AshrafMd-1]

WHAT

🤖 Generated by Copilot at 0d71611

Improved the layout and responsiveness of some components on smaller screens. Modified the PatientHome, RelativeDateUserMention, and ConsultationCard components to use Tailwind CSS classes for spacing, alignment, and contrast.

Proposed Changes

• Fixes Styling issues in the patient details page #6632
• Added margin below the Create Consultation button
• Center aligned The Created and Last Edited cards
• Added styling to the key and value in the Created and Last Modified fields in Consultation History

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

HOW

🤖 Generated by Copilot at 0d71611

• Improve the responsiveness and alignment of the tooltip and the user name in the RelativeDateUserMention component by using flex-wrap and justify-center classes (link)
• Add some margin and contrast to the user name and the date in the ConsultationCard component by wrapping the RelativeDateUserMention component inside a div with ml-1 and text-black classes (link)
• Create some space between the button and the patient details card in the PatientHome component by adding a mb-2 class to the ButtonV2 component (link)
• Create some padding between the border and the content in the patient details card in the PatientHome component by adding a pr-2 class to the first div and a pl-2 class to the second div inside the card (link, link)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 16, 2023 2:23pm

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	d9a1cb9
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/655625d27d2f6b0008b89451
😎 Deploy Preview	https://deploy-preview-6639--care-egov-staging.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nihal467]

LGTM