(Fix) UI Issue with Jumbled Search Results when PatientSearchBar Component is used in a workspace

[amosmachora]

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

In this PR I have fixed a small UI issue that showed jumbled search results whever the PatientSearchBar component is used in small windows for lack of a better term i.e workspaces.

The issue was that there is an element that hard coded this style

[data-extension-id=patient-search-bar]>div button {
    height: 3rem;
}

so the above css rule forced the button to a height of 3rem thereby throwing the UI into a complete catastrophe. Fixed it by adding a new rule with height: auto that overrides the original rule. Please check the attached screenshots.

Screenshots

Before

After

Related Issue

Other

[vasharma05]

Hi @amosmachora!
Please follow the PR conventions and mention the ticket in the PR title to move ahead.
Thanks!

[vasharma05]

Hi @amosmachora!
Please follow the PR conventions and mention the ticket in the PR title to move ahead.
Thanks!

[vasharma05]

Also, the compact patient search is not meant to be used at any other place than the search bar itself.
Instead you can place a button to search a patient and then select a patient from patient search workspace, which is already implemented in the service queues dashboard.
Thanks!

[denniskigen]

Isn't this what you ought to fix? Because the styles are not scoped under a class name, they'll apply globally to all instances of the patient-search-bar extension. That's not ideal. The fix should probably happen there and not anywhere else.

See https://o3-docs.openmrs.org/docs/coding-conventions#styling for inspiration.

[amosmachora]

You are right I should avoid overriding the original rule. I fear I might break other places where the component is used but let me test to see if we can achieve the same functionality.

[denniskigen]

Could you post an updated screenshot, @amosmachora?

[amosmachora]

Here is a screenshot.

Scoping this class to only apply to the searchBarWrapper makes wherever else the component is used the height becomes auto by default.

Do not worry of the rendering twice of the extensions. I think that is a local issue because I am running two apps simultaneously.

[vasharma05]

Thanks @amosmachora !