refactor(app): adjust ODD simple style predefined location option mar…

…gin (#16661)

Closes EXEC-798

Fixes a continue/go back margin issue with simple style drop tip flows on the ODD.

app/src/organisms/DropTipWizardFlows/steps/ChooseLocation.tsx

@@ -16,8 +16,10 @@ import {
 import { BLOWOUT_SUCCESS, DROP_TIP_SUCCESS, DT_ROUTES } from '../constants'
 import { DropTipFooterButtons } from '../shared'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { AddressableAreaName } from '@opentrons/shared-data'
 import type {
+  DropTipModalStyle,
   DropTipWizardContainerProps,
   ValidDropTipBlowoutLocation,
 } from '../types'
@@ -129,13 +131,7 @@ export function ChooseLocation({
   }
 
   return (
-    <Flex
-      css={
-        modalStyle === 'simple'
-          ? CONTAINER_STYLE_SIMPLE
-          : CONTAINER_STYLE_INTERVENTION
-      }
-    >
+    <Flex css={buildContainerStyle(modalStyle, dropTipCommandLocations.length)}>
       <Flex css={OPTION_CONTAINER_STYLE}>
         <StyledText
           oddStyle="level4HeaderSemiBold"
@@ -169,6 +165,17 @@ export function ChooseLocation({
   )
 }
 
+// TODO(jh, 10-31-24): The numLocations logic is a hack to get around some unexpected ODD-specific CSS behavior in RadioButton.
+//  Investigate RadioButton ODD styling.
+const buildContainerStyle = (
+  modalStyle: DropTipModalStyle,
+  numLocations: number
+): FlattenSimpleInterpolation => {
+  return modalStyle === 'simple'
+    ? containerStyleSimple(numLocations)
+    : CONTAINER_STYLE_INTERVENTION
+}
+
 const CONTAINER_STYLE_BASE = `
   overflow: ${OVERFLOW_AUTO};
   flex-direction: ${DIRECTION_COLUMN};
@@ -182,12 +189,14 @@ const CONTAINER_STYLE_INTERVENTION = css`
   ${CONTAINER_STYLE_BASE}
 `
 
-const CONTAINER_STYLE_SIMPLE = css`
+const containerStyleSimple = (
+  numLocations: number
+): FlattenSimpleInterpolation => css`
   ${CONTAINER_STYLE_BASE}
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
 
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    height: 80%;
+    height: ${numLocations >= 4 ? '80%' : '100%'};
     flex-grow: 0;
   }
 `