From 666c7c15e3f2b1bcf75a51ec3c7d142b6cb095aa Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Thu, 31 Oct 2024 12:34:08 -0400
Subject: [PATCH] fix(app): fix ODD simple style predefined location option
 margin

---
 .../steps/ChooseLocation.tsx                  | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/src/organisms/DropTipWizardFlows/steps/ChooseLocation.tsx b/app/src/organisms/DropTipWizardFlows/steps/ChooseLocation.tsx
index 08d9831c0b3..7bbabcad759 100644
--- a/app/src/organisms/DropTipWizardFlows/steps/ChooseLocation.tsx
+++ b/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;
   }
 `