From ae51aa58cc9656ae282911a56ff8b174195a068f Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Tue, 21 May 2024 09:42:50 -0400
Subject: [PATCH] fix(protocol-designer): offset tip in blowout location
 vizualization (#15227)

Closes RQA-2747

Add constant tip offset in x-direction for blowout location vizualization in well
---
 .../fields/TipPositionField/TipPositionZAxisViz.tsx            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionZAxisViz.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionZAxisViz.tsx
index cff1fa05a9a..6df50910e2c 100644
--- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionZAxisViz.tsx
+++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionZAxisViz.tsx
@@ -7,6 +7,7 @@ import WELL_CROSS_SECTION_IMAGE from '../../../../images/well_cross_section.svg'
 import styles from './TipPositionInput.module.css'
 
 const WELL_HEIGHT_PIXELS = 145
+const TIP_X_OFFSET_PIXELS = 22
 const PIXEL_DECIMALS = 2
 interface TipPositionZAxisVizProps {
   wellDepthMm: number
@@ -30,7 +31,7 @@ export function TipPositionZAxisViz(
       <img
         src={PIPETTE_TIP_IMAGE}
         className={styles.pipette_tip_image}
-        style={{ bottom: `${bottomPx}px` }}
+        style={{ bottom: `${bottomPx}px`, right: `${TIP_X_OFFSET_PIXELS}px` }}
       />
       {props.wellDepthMm !== null && (
         <span className={styles.well_height_label}>{props.wellDepthMm}mm</span>