From e734350218938ae6fc8cd27fb699813f4323159c Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Mon, 10 Feb 2025 11:11:39 -0500
Subject: [PATCH] fix(protocol-designer): fix OffDeckDetails container flicker
 (#17479)

Refactors padding logic in PD `OffDeckDetails` outer container to
justify right with padding, rather than justifying center and
dynamically calculating left padding based on the presence of the
details element. This prevents flickering when hovering an added offdeck
labware

Closes RQA-3953
---
 .../src/pages/Designer/OffDeck/OffDeckDetails.tsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx b/protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx
index b062915271c..0e3f15ae8a8 100644
--- a/protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx
+++ b/protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx
@@ -12,6 +12,7 @@ import {
   EmptySelectorButton,
   Flex,
   JUSTIFY_CENTER,
+  JUSTIFY_FLEX_END,
   LabwareRender,
   OVERFLOW_AUTO,
   RobotWorkSpace,
@@ -59,16 +60,8 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
   )
   const containerWidth = tab === 'startingDeck' ? '100vw' : '75vw'
 
-  const paddingLeftWithHover =
-    hoverSlot == null
-      ? `calc((${containerWidth} - (${SPACING.spacing24}  * 2) - ${OFF_DECK_MAP_WIDTH}) / 2)`
-      : SPACING.spacing24
-  const paddingLeft = tab === 'startingDeck' ? paddingLeftWithHover : undefined
-  const padding =
-    tab === 'protocolSteps'
-      ? SPACING.spacing24
-      : `${SPACING.spacing40} ${paddingLeft}`
   const stepDetailsContainerWidth = `calc(((${containerWidth} - ${OFF_DECK_MAP_WIDTH}) / 2) - (${SPACING.spacing24}  * 3))`
+  const paddingRight = `calc((100% - ${OFF_DECK_MAP_WIDTH}) / 2)`
 
   return (
     <Flex
@@ -76,10 +69,10 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
       borderRadius={BORDERS.borderRadius12}
       width="100%"
       height="100%"
-      padding={padding}
+      padding={`${SPACING.spacing40} ${paddingRight} ${SPACING.spacing40} 0`}
       gridGap={SPACING.spacing24}
       alignItems={ALIGN_CENTER}
-      justifyContent={JUSTIFY_CENTER}
+      justifyContent={JUSTIFY_FLEX_END}
     >
       {hoverSlot != null ? (
         <Flex width={stepDetailsContainerWidth} height="6.25rem">