refactor(components): Move SVG fudge to <svg> element (#18938)

## Overview

Goes towards EXEC-1278.

## Changelog

The SVG graphic of the Flex Stacker is not visually aligned with the
underlying module geometry. We need to shift it slightly to compensate.

Previously, we did that by fudging the whole `<Module>` component's
position. One disadvantage to that approach is that all the callers of
`<Module>` need to individually remember to special-case the stacker,
and I suspect some of those callers did forget. Another disadvantage is
that it doesn't compose well: the adjustment would apply to `<Labware>`
inside the `<Module>`, but we want it to only apply to the SVG of the
module itself.

To solve both, this moves the adjustment onto the underlying `<svg>`
element.

Author: SyntaxColoring

app/src/molecules/ModuleInfo/ModuleInfo.tsx

@@ -12,7 +12,6 @@ import {
   RobotCoordsForeignObject,
   SPACING,
   STACKER_HOPPER_LABWARE_X_OFFSET,
-  STACKER_HOPPER_LABWARE_Y_OFFSET,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import {
@@ -67,11 +66,7 @@ export const ModuleInfo = (props: ModuleInfoProps): JSX.Element => {
           ? STACKER_HOPPER_LABWARE_X_OFFSET
           : 0
       }
-      y={
-        moduleDef.moduleType === FLEX_STACKER_MODULE_TYPE
-          ? STACKER_HOPPER_LABWARE_Y_OFFSET
-          : 0
-      }
+      y={0}
       height={labwareInterfaceYDimension ?? yDimension}
       width={labwareInterfaceXDimension ?? xDimension}
       flexProps={{

app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareMap.tsx

@@ -7,7 +7,6 @@ import {
   Flex,
   SPACING,
   STACKER_HOPPER_LABWARE_X_OFFSET,
-  STACKER_HOPPER_LABWARE_Y_OFFSET,
 } from '@opentrons/components'
 import {
   FLEX_ROBOT_TYPE,
@@ -141,11 +140,6 @@ export function SetupLabwareMap({
                     ? STACKER_HOPPER_LABWARE_X_OFFSET
                     : 0
                 }
-                yOffset={
-                  moduleType === FLEX_STACKER_MODULE_TYPE
-                    ? STACKER_HOPPER_LABWARE_Y_OFFSET
-                    : 0
-                }
               />
             ) : null}
           </g>

components/src/hardware-sim/BaseDeck/BaseDeck.tsx

@@ -88,14 +88,12 @@ export interface HopperLabwareProps {
 
 // these ugly consts are unfortunately necessary as the hopper location exists
 // outside of our deck definition so the render doesn't follow our normal conventions
-export const STACKER_MODULE_Y_OFFSET = -6
 // todo(mm, 2025-07-16): 17.5 mm is a by-eye adjustment that takes us from a little bit
 // left of the hopper to inside the hopper. The fact that we were 17.5 mm left in the
 // first place is weird, and suggests we're doing wrong math somewhere. A more normal
 // thing to expect here would be starting at the extended shuttle position and needing
 // an offset of hundreds of mm to go from there to inside the hopper.
 export const STACKER_HOPPER_LABWARE_X_OFFSET = 17.5
-export const STACKER_HOPPER_LABWARE_Y_OFFSET = 6
 export const STACKER_DECK_VIEW_BOX_EXPANSION = 220
 
 interface BaseDeckProps {
@@ -334,7 +332,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                   key={`${moduleModel} ${moduleLocation.slotName}`}
                   def={moduleDef}
                   x={slotPosition[0]}
-                  y={slotPosition[1] + STACKER_MODULE_Y_OFFSET}
+                  y={slotPosition[1]}
                   orientation={inferModuleOrientationFromXCoordinate(
                     slotPosition[0]
                   )}
@@ -346,7 +344,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                   {nestedLabwareDef != null ? (
                     <g
                       cursor={onLabwareClick != null ? 'pointer' : ''}
-                      transform={`translate(${STACKER_HOPPER_LABWARE_X_OFFSET}, ${STACKER_HOPPER_LABWARE_Y_OFFSET})`}
+                      transform={`translate(${STACKER_HOPPER_LABWARE_X_OFFSET}, 0)`}
                     >
                       <LabwareRender
                         definition={nestedLabwareDef}

components/src/hardware-sim/Module/FlexStacker.tsx

@@ -1,4 +1,15 @@
 export function FlexStacker(): JSX.Element {
+  // The given SVG is visually a little misaligned from where we expect it to be.
+  // Translate it, by eye, to compensate.
+  return (
+    <g transform="translate(0, -6)">
+      <UnadjustedSVG />
+    </g>
+  )
+}
+
+// The unadjusted SVG, straight from design.
+function UnadjustedSVG(): JSX.Element {
   return (
     <svg
       width="374"