fix(protocol-designer): fix scroll on SelectPipettes screen (#16983)

Reverts overflow on SelectPipettes screen to `OVERFLOW_SCROLL`. Also,
adds autoscroll to bottom to reveal tiprack selection if obscured.

protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 import { useDispatch, useSelector } from 'react-redux'
@@ -91,6 +91,16 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
     setPipetteVolume(null)
   }
 
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  const handleScrollToBottom = (): void => {
+    if (ref.current != null) {
+      ref.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      })
+    }
+  }
   //  initialize pipette name once all fields are filled out
   useEffect(() => {
     if (
@@ -106,6 +116,10 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
     }
   }, [pipetteType, pipetteGen, pipetteVolume, selectedPipetteName])
 
+  useEffect(() => {
+    handleScrollToBottom()
+  }, [pipetteType, pipetteVolume, pipetteGen])
+
   const noPipette =
     (pipettesByMount.left.pipetteName == null ||
       pipettesByMount.left.tiprackDefURI == null) &&
@@ -187,6 +201,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
               flexDirection={DIRECTION_COLUMN}
               overflowY={OVERFLOW_AUTO}
               gridGap={SPACING.spacing32}
+              ref={ref}
             >
               <Flex
                 flexDirection={DIRECTION_COLUMN}

protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectPipettes.test.tsx

@@ -21,6 +21,7 @@ vi.mock('../../../organisms')
 vi.mock('../../../labware-defs/actions')
 vi.mock('../utils')
 const mockLocation = vi.fn()
+window.HTMLElement.prototype.scrollIntoView = vi.fn()
 
 vi.mock('react-router-dom', async importOriginal => {
   const actual = await importOriginal<NavigateFunction>()