fix(app): Fix alignment issues in modals, fix titlebar on page

[Kadee80]

overview

This PR fixes the alignment issues introduced by #1705. Some modal page titlebars had been cropped. This should standardize behavior once and for all. Worth noting labware calibration uses a spinner modal as modal page content, not the SpinnerModalPage component from comp_lib so a little css override in LabwareCalibration was necessary. While I was in there, I made the TitleBar position fixed.

changelog

• comp_lib update ModalPage styles
• app fixed titlebar when in page
• center spinner modal positioning in LabwareCalibration

review requests

Please click though any and all modals in the app, some are not accessible in VS so a Robot is preferred.

• attach/change pipette modals and titlebars look as expected
• calibrate modals and titlebars look as expected (get to at least the first jog screen)
• labware calibration modals look as expected

[codecov]

Codecov Report

Merging #1719 into edge will decrease coverage by 0.41%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             edge    #1719      +/-   ##
==========================================
- Coverage   35.34%   34.92%   -0.42%     
==========================================
  Files         341      344       +3     
  Lines        5594     5921     +327     
==========================================
+ Hits         1977     2068      +91     
- Misses       3617     3853     +236

Impacted Files	Coverage Δ
app/src/components/Page/index.js	0% <ø> (ø)	⬆️
...tocol-designer/src/file-data/selectors/commands.js	21.35% <0%> (-2.78%)	⬇️
protocol-designer/src/step-generation/utils.js	97.1% <0%> (-0.68%)	⬇️
protocol-designer/src/steplist/generateSubsteps.js	0% <0%> (ø)	⬆️
...ol-designer/src/top-selectors/substep-highlight.js	0% <0%> (ø)	⬆️
protocol-designer/src/form-types.js	0% <0%> (ø)	⬆️
...ocol-designer/src/components/StepEditForm/index.js	0% <0%> (ø)	⬆️
protocol-designer/src/containers/Alerts.js	0% <0%> (ø)	⬆️
...r/src/step-generation/dispenseUpdateLiquidState.js	100% <0%> (ø)	⬆️
protocol-designer/src/step-generation/aspirate.js	100% <0%> (ø)	⬆️
... and 8 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0d99ea0...fd50fca. Read the comment docs.

[IanLondon]

@Kadee80 Looks like some padding is missing from the top:

[mcous]

This change makes --flex-start little unusable for other components (or at least, it's unexpected given its name). Can we put this on the .modal_page style itself instead?

[IanLondon]

💎 tested on robot, all modals, all good

[mcous]

🔷