Attempt to fix vertical padding on pixel coordinate div in imviz

[kecnry]

Description

The font that is rendered by notebook vs lab seem to be slightly different, so centering with a fixed padding is inconsistent.
This pull request attempts to give more consistent padding to the pixel display in imviz by vertically centering the div and providing a fixed line height.

Checklist for package maintainer(s)

This checklist is meant to remind the package maintainer(s) who will review this pull request of some common things to look for. This list is not exhaustive.

• Are two approvals required? Branch protection rule does not check for the second approval. If a second approval is not necessary, please apply the trivial label.
• Do the proposed changes actually accomplish desired goals? Also manually run the affected example notebooks, if necessary.
• Do the proposed changes follow the STScI Style Guides?
• Are tests added/updated as required? If so, do they follow the STScI Style Guides?
• Are docs added/updated as required? If so, do they follow the STScI Style Guides?
• Did the CI pass? If not, are the failures related?
• Is a change log needed? If yes, is it added to CHANGES.rst?
• Is a milestone set? Milestone is only currently required for PRs related to Imviz MVP.
• After merge, any internal documentations need updating (e.g., JIRA, Innerspace)?

[pllim]

The padding is fixed but "Pixel" row now jumps to the center when WCS is not present.

What do you think, @Jenneh ?

Without this patch

With this patch

[kecnry]

Yes, that's true, it will always vertically center the contents. If we don't want that, we can add empty placeholders with a fixed height for the other "rows" so that the pixel row is always near the top.

[pllim]

I don't have a preference but maybe @PatrickOgle or @Jenneh does.

[rosteen]

See https://vuetifyjs.com/en/components/grids/ for vuetify alignment stuff, specifically https://vuetifyjs.com/en/components/grids/#align.

[rosteen]

You may need to put a <v-container> inside the div to take advantage of the vuetify features.

[pllim]

I can't get VueJS to work. I tried adding a <v-container> <v-row align="start"> <v-col> layer outside of <div> and I get something horrible. I found a non-VueJS workaround though.

[pllim]

Thanks, everyone!

[Jenneh]

It is nice that it always vertically centers. Padding looks better. It is still a little uncomfortably close to the edges but I think this is good enough for now.