(fix) Fix overlay stacking context so Datepicker isn't hidden on tablet

[donaldkibet]

Requirements

• This PR has a title that briefly describes the work done, including the ticket number if there is a ticket.
• 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 fixes a display issue with the DatePicker on tablet devices due to a higher z-index value on its parent container. Additionally, it removes the scrollbar to enhance the user experience by preventing flickering. Below GIF shows the fix and the error

Screenshots

Related Issue

Other

[denniskigen]

Thanks for the quick turnaround, @donaldkibet.

It appears scrollbar-width is only compatible with Firefox whereas -ms-overflow-style is non-standard.

You might need to add something like:

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

To get the same results in Webkit browsers (Chrome, Safari, Edge).

[ibacher]

Or, better yet, we could start leveraging postcss for stuff like this. With this plugin.

[denniskigen]

LGTM

[denniskigen]

@donaldkibet thanks for decoupling the scrolling issue and the z-index concern. It'd be nice to address the scrolling issue in a separate PR. Do you need a version bump in Patient Chart?