fix(protocol-designer): set PathField width to 100% (#17370)

Fixes width of `PathField` `PathButton` used in move liquid step form
Opentrons · Jan 28, 2025 · c630b88 · c630b88
1 parent 410bfa9
commit c630b88
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PathField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PathField.tsx
@@ -69,7 +69,7 @@ interface PathButtonProps {
 }
 
 function PathButton(props: PathButtonProps): JSX.Element {
-  const { disabled, onClick, id, path, selected, subtitle } = props
+  const { disabled, onClick, path, selected, subtitle } = props
   const [targetProps, tooltipProps] = useHoverTooltip({
     placement: TOOLTIP_TOP_START,
   })
@@ -79,14 +79,18 @@ function PathButton(props: PathButtonProps): JSX.Element {
     <Tooltip tooltipProps={tooltipProps} maxWidth="24.5rem">
       <Flex gridGap={SPACING.spacing8} flexDirection={DIRECTION_COLUMN}>
         <Box>{t(`step_edit_form.field.path.title.${path}`)}</Box>
-        <img src={PATH_ANIMATION_IMAGES[path]} width="361px" />
+        <img
+          src={PATH_ANIMATION_IMAGES[path]}
+          width="361px"
+          alt="path animation"
+        />
         <Box>{subtitle}</Box>
       </Flex>
     </Tooltip>
   )
 
   return (
-    <Flex {...targetProps} key={id}>
+    <Flex {...targetProps} flexDirection={DIRECTION_COLUMN}>
       {tooltip}
       <RadioButton
         width="100%"