(feat) O3-3252: Form engine UI improvements

[denniskigen]

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 applies various fixes to the form engine UI, including:

• Fixing the form layout in the tablet viewport
• Making several tweaks to align with the available designs here and here.

Screenshots

Before

Tablet

Desktop (maximized) - the sidebar doesn't quite match the designs

After

Tablet

Desktop

Desktop (maximized) - the sidebar aligned with the designs

Related Issue

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

Other

[github-actions]

Size Change: +385 B (+0.04%)

Total Size: 1.05 MB

ℹ️ View Unchanged

Filename	Size	Change
dist/184.js	11.2 kB	0 B
dist/225.js	2.56 kB	0 B
dist/29.js	157 kB	0 B
dist/300.js	682 B	0 B
dist/31.js	4.9 kB	0 B
dist/318.js	2.42 kB	0 B
dist/327.js	1.71 kB	0 B
dist/335.js	955 B	0 B
dist/353.js	3.02 kB	0 B
dist/368.js	240 kB	+133 B (+0.06%)
dist/371.js	71.5 kB	0 B
dist/41.js	3.36 kB	0 B
dist/436.js	752 B	0 B
dist/540.js	2.64 kB	0 B
dist/55.js	2.14 kB	0 B
dist/635.js	14.3 kB	0 B
dist/779.js	203 kB	0 B
dist/8.js	3.67 kB	0 B
dist/942.js	482 B	0 B
dist/979.js	6.85 kB	0 B
dist/99.js	690 B	0 B
dist/993.js	3.08 kB	0 B
dist/998.js	15.5 kB	0 B
dist/main.js	298 kB	+252 B (+0.08%)
dist/openmrs-form-engine-lib.js	3.76 kB	0 B

_{compressed-size-action}

[ibacher]

Definitely an improvement! One small comment: the whole point of rendering a form in a slightly larger workspace on desktops was to give us space to render the navigation stuff, but it looks like that's only available in the full-screen variant?

[denniskigen]

Yeah, I'd love to hear @samuelmale's thoughts on that, Ian.

[pirupius]

Thanks @denniskigen for this clean up. I've noticed a discrepancy in the background colors with the soft white cutting off midway the last field (which in this case is the select field) could there be an extra margin or padding causing that?

[pirupius]

This might not be related to this PR but there seems to be a missing label. Wasn't this resolved?

[denniskigen]

About the padding cutting off fields

That's right, there's a bit of padding around the button set on the tablet viewport. For context, see this Zeplin screen of the Medication Order form. The designs also envision the sidebar appearing when in the tablet viewport, which is currently not the case. If we go in that direction, we wouldn't need to show the button set at the bottom of the page. That's what Ian is suggesting above.

If we decide not to show the sidebar on tablet, one way to mitigate the issue you raised could be to apply a top border to the button set container.

This might not be related to this PR but there seems to be a missing label. Wasn't this resolved?

This issue was resolved. I haven't bumped the Core tooling in my local copy of the Patient Chart, which is why you see some labels fail to load.

[samuelmale]

LGTM, thanks @denniskigen for the UI revamp 🎉

[denniskigen]

Please don't merge yet, @samuelmale. I have a commit on the way.

[denniskigen]

Sorry for the additional scope in the latest commit, hopefully it all makes sense.

@samuelmale, About @ibacher's question, do you know whether a ticket exists to handle it. Is it something you've considered?

[samuelmale]

do you know whether a ticket exists to handle it. Is it something you've considered?

@denniskigen not to my knowledge.

[denniskigen]

I've filed this issue to explore the feasibility of rendering the form navigation menu in the tablet and minimized desktop views.