Make consultation page more responsive

[Omkar76]

WHAT

🤖[deprecated] Generated by Copilot at f03c94c

The change improves the layout and responsiveness of the buttons in the ConsultationDetails component. It uses flex containers, custom breakpoints, and utility classes to adjust the button sizes and alignment on different screen sizes. It is part of a feature request to enhance the app's UI/UX.

Proposed Changes

• Fixes Make the consultation page more properly responsive #6617?
• Made header menu more responsive. Making it take 2/3/4 items a row depending on number of menu items and available space.
• Made patient details card responsive. Patient details and bed details are shown side by side. Made mews and the buttons show side by side if space available. Make all four of these display on one row if extra large screen.

@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

🤖[deprecated] Generated by Copilot at f03c94c

• Modify the layout and responsiveness of the consultation details buttons (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	Dec 27, 2023 5:41am

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	28caac9
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/658bb8c973dc49000833b7c8
😎 Deploy Preview	https://deploy-preview-6871--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]

@Omkar76

• This responsive view doesn't look good, can you have a better approach, marking it for discussion to have an opinion from others as well

[Omkar76]

Some mockups as per todays discussion.

Original on Ipad Air

justifying the items to left and right ends

Reduce padding arounds mews and columize the patient details. Maybe we can leave the chips (age, gender) be a row.

Using 3 columns. I like this little better. can maybe center the those buttons (edit, log, show more)

3 columns buttons. and button width full row. Possibly limit the width of buttons after certain brekpoint?

Let me know if there is any other variation I can try. Thanks.

cc: @nihal467

[nihal467]

kept on hold until the discussion in the slack care_general channel is concluded regarding the same

https://rebuildearth.slack.com/archives/C01035FT0P5/p1703676547220219

[github-actions]

Hi, This pr has been automatically marked as stale because it has not had any recent activity. It will be automatically closed if no further activity occurs for 7 more days. Thank you for your contributions.

[github-actions]

Hi, @gigincg, @nihal467, @khavinshankar, @mathew-alex, This pr has been automatically closed because it has not had any recent activity. Thank you for your contributions. Feel free to repopen the pr.