(fix) O3-3897: Improvements to the 'all encounters' tab on the visits page

[mccarthyaaron]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

This PR aims at making the encounter tabs in the visists section of the patient chat implement the right scroll behaviour as per this video

Screenshots

03-3897.mp4

Related Issue

https://openmrs.atlassian.net/browse/O3-3897

[ciaranduffy]

@mccarthyaaron, thanks for the work on this.

There are a few elements not quite right, visually though.

1. The tabs should be in a container that's 40px in height, with a 2px bottom border that's #E0E0E0 or Border-subtle-00 in colour.

2. The position of the tabs is not correct. They tabs should sit immediately below the vitals header in their container. The first visit card should be 16px from the bottom of the tabs container.

[mccarthyaaron]

@ciaranduffy I have made some changes. Though there is still an issue with "The tabs should sit immediately below the vitals header". That is being prevented by a margin applied generically to all slots as shown here. Changing it would affect all other widgets(medications, orders, etc). We could do something like this , applying a different styles to the 'patient-chart-encounters-dashboard-slot'. Let me know what you think!

[ciaranduffy]

@mccarthyaaron, I'm not a developer so I don't really understand the code snippets you shared with me. Could you share a screenshot or a video of the end result on your side? Thanks

[mccarthyaaron]

@ciaranduffy Here is a clip.

tabs.mp4

[ciaranduffy]

Thanks @mccarthyaaron, I think for now this is fine. If we need to add internal padding, when the visit summary cards themselves are iterated to match the design, hopefully that's a possibility?

Thanks

[mccarthyaaron]

Thanks @mccarthyaaron, I think for now this is fine. If we need to add internal padding, when the visit summary cards themselves are iterated to match the design, hopefully that's a possibility?

Thanks

Yes it is @ciaranduffy. So should I go ahead and commit the changes from the screen recording

[ciaranduffy]

From the design side, I have no objections. Thanks

[denniskigen]

#2024 (comment) addressed here.

[denniskigen]

LGTM. Thanks, @mccarthyaaron. The one thing that's outstanding here is blending the borders so that the green border of the active tab blends in with the 2px bottom border of the containing div. We can address that in a future iteration of implementing the designs.