refactor(app): Refactor drop tip flows presentation layer (#16285)

Closes EXEC-520

This PR cleans up drop tip wizard, removing things like negative margin offsets, unifying view components when possible, and separating presentation concerns into a modalStyle, which can be either intervention (used by Error Recovery) or simple (used in non-ER circumstances, currently).

There is still some special-cased CSS based on modalStyle, but there's no way around that, because that's how it is in design.

The only "functional" change is all the proceed/go back buttons now do not shift up or down from step to step!

app/src/assets/localization/en/drop_tip_wizard.json

@@ -4,28 +4,30 @@
   "blowout_complete": "Blowout complete",
   "blowout_liquid": "Blow out liquid",
   "cant_safely_drop_tips": "Can't safely drop tips",
-  "choose_blowout_location": "choose blowout location",
-  "choose_drop_tip_location": "choose tip-drop location",
+  "choose_blowout_location": "Choose blowout location",
+  "choose_drop_tip_location": "Choose tip-drop location",
   "confirm_blowout_location": "Is the pipette positioned where the liquids should be blown out?",
   "confirm_drop_tip_location": "Is the pipette positioned where the tips should be dropped?",
+  "confirm_position": "Confirm position",
   "confirm_removal_and_home": "Confirm removal and home",
+  "continue": "Continue",
   "drop_tip_complete": "Tip drop complete",
   "drop_tip_failed": "The drop tip could not be completed. Contact customer support for assistance.",
-  "drop_tips": "drop tips",
+  "drop_tips": "Drop tips",
   "error_dropping_tips": "Error dropping tips",
+  "exit": "Exit",
   "exit_and_home_pipette": "Exit and home pipette",
   "getting_ready": "Getting ready…",
-  "go_back": "go back",
+  "go_back": "Go back",
   "jog_too_far": "Jog too far?",
   "liquid_damages_pipette": "Homing the pipette with liquid in the tips may damage it. You must remove all tips before using the pipette again.",
   "liquid_damages_this_pipette": "Homing the <strong>{{mount}} pipette</strong> with liquid in the tips may damage it. You must remove all tips before using the pipette again.",
-  "move_to_slot": "move to slot",
+  "move_to_slot": "Move to slot",
   "no_proceed_to_drop_tip": "No, proceed to tip removal",
   "position_and_blowout": "Ensure that the pipette tip is centered above and level with where you want the liquid to be blown out. If it isn't, use the controls below or your keyboard to jog the pipette until it is properly aligned.",
   "position_and_drop_tip": "Ensure that the pipette tip is centered above and level with where you want to drop the tips. If it isn't, use the controls below or your keyboard to jog the pipette until it is properly aligned.",
-  "position_the_pipette": "position the pipette",
+  "position_the_pipette": "Position the pipette",
   "remove_any_attached_tips": "Remove any attached tips",
-  "remove_attached_tips": "Remove any attached tips",
   "remove_the_tips_from_pipette": "You may want to remove the tips from the pipette before using it again in a protocol.",
   "remove_the_tips_manually": "Remove the tips manually. Then home the gantry. Homing with tips attached could pull liquid into the pipette and damage it.",
   "remove_tips": "Remove tips",

app/src/molecules/InProgressModal/InProgressModal.tsx

@@ -52,6 +52,7 @@ const MODAL_STYLE = css`
   justify-content: ${JUSTIFY_CENTER};
   padding: ${SPACING.spacing32};
   height: 24.625rem;
+  width: 100%;
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
     max-height: 29.5rem;
     height: 100%;

app/src/organisms/Devices/PipetteCard/FlexPipetteCard.tsx

@@ -271,6 +271,7 @@ export function FlexPipetteCard({
           mount={mount}
           instrumentModelSpecs={pipetteModelSpecs}
           closeFlow={toggleDTWiz}
+          modalStyle="simple"
         />
       ) : null}
       {attachedPipette?.ok && showAboutPipetteSlideout ? (

app/src/organisms/Devices/PipetteCard/index.tsx

@@ -111,6 +111,7 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => {
           mount={mount}
           instrumentModelSpecs={pipetteModelSpecs}
           closeFlow={toggleDTWiz}
+          modalStyle="simple"
         />
       ) : null}
       {showSlideout &&

app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/hooks/useRunHeaderDropTip.ts

@@ -97,6 +97,7 @@ export function useRunHeaderDropTip({
             mount: aPipetteWithTip.mount,
             instrumentModelSpecs: aPipetteWithTip.specs,
             closeFlow: onCloseFlow,
+            modalStyle: 'simple',
           },
         }
       : { showDTWiz: false, dtWizProps: null }

app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/ProtocolDropTipModal.tsx

@@ -118,7 +118,7 @@ export function ProtocolDropTipModal({
   const buildHeader = (): JSX.Element => {
     return (
       <ModalHeader
-        title={t('remove_attached_tips')}
+        title={t('remove_any_attached_tips')}
         icon={buildIcon()}
         color={COLORS.black90}
         backgroundColor={COLORS.white}