fix(protocol-designer): fix empty selector button size issue (#17418)

* fix(protocol-designer): fix empty selector button size issue

Author: koji

protocol-designer/src/organisms/EditInstrumentsModal/PipetteOverview.tsx

@@ -9,6 +9,7 @@ import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   EmptySelectorButton,
+  FLEX_MAX_CONTENT,
   Flex,
   Icon,
   JUSTIFY_SPACE_BETWEEN,
@@ -179,15 +180,17 @@ export function PipetteOverview({
           ) : null}
           {has96Channel ||
           (leftPipette != null && rightPipette != null) ? null : (
-            <EmptySelectorButton
-              onClick={() => {
-                setPage('add')
-                setMount(targetPipetteMount)
-              }}
-              text={t('add_pipette')}
-              textAlignment="left"
-              iconName="plus"
-            />
+            <Flex width={FLEX_MAX_CONTENT}>
+              <EmptySelectorButton
+                onClick={() => {
+                  setPage('add')
+                  setMount(targetPipetteMount)
+                }}
+                text={t('add_pipette')}
+                textAlignment="left"
+                iconName="plus"
+              />
+            </Flex>
           )}
         </Flex>
       </Flex>
@@ -238,14 +241,16 @@ export function PipetteOverview({
                 </Flex>
               </ListItem>
             ) : (
-              <EmptySelectorButton
-                onClick={() => {
-                  dispatch(toggleIsGripperRequired())
-                }}
-                text={t('protocol_overview:add_gripper')}
-                textAlignment="left"
-                iconName="plus"
-              />
+              <Flex width={FLEX_MAX_CONTENT}>
+                <EmptySelectorButton
+                  onClick={() => {
+                    dispatch(toggleIsGripperRequired())
+                  }}
+                  text={t('protocol_overview:add_gripper')}
+                  textAlignment="left"
+                  iconName="plus"
+                />
+              </Flex>
             )}
           </Flex>
         </Flex>

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

@@ -8,6 +8,7 @@ import {
   DIRECTION_COLUMN,
   EmptySelectorButton,
   Flex,
+  FLEX_MAX_CONTENT,
   ListItem,
   SPACING,
   StyledText,
@@ -99,23 +100,24 @@ export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
                 )
 
                 return (
-                  <EmptySelectorButton
-                    disabled={numSlotsAvailable === 0}
-                    key={equipment}
-                    textAlignment={TYPOGRAPHY.textAlignLeft}
-                    iconName="plus"
-                    text={t(`${equipment}`)}
-                    onClick={() => {
-                      if (numSlotsAvailable === 0) {
-                        makeSnackbar(t('slots_limit_reached') as string)
-                      } else {
-                        setValue('additionalEquipment', [
-                          ...additionalEquipment,
-                          equipment,
-                        ])
-                      }
-                    }}
-                  />
+                  <Flex width={FLEX_MAX_CONTENT} key={equipment}>
+                    <EmptySelectorButton
+                      disabled={numSlotsAvailable === 0}
+                      textAlignment={TYPOGRAPHY.textAlignLeft}
+                      iconName="plus"
+                      text={t(`${equipment}`)}
+                      onClick={() => {
+                        if (numSlotsAvailable === 0) {
+                          makeSnackbar(t('slots_limit_reached') as string)
+                        } else {
+                          setValue('additionalEquipment', [
+                            ...additionalEquipment,
+                            equipment,
+                          ])
+                        }
+                      }}
+                    />
+                  </Flex>
                 )
               })}
             </Flex>

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

@@ -5,6 +5,7 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   EmptySelectorButton,
+  FLEX_MAX_CONTENT,
   Flex,
   ListItem,
   SPACING,
@@ -320,7 +321,7 @@ function AddModuleEmptySelectorButton(
 
   return (
     <>
-      <Flex {...targetProps}>
+      <Flex {...targetProps} width={FLEX_MAX_CONTENT}>
         <EmptySelectorButton
           disabled={!areSlotsAvailable || disableGripperRequired}
           textAlignment={TYPOGRAPHY.textAlignLeft}

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

@@ -21,6 +21,7 @@ import {
   DISPLAY_FLEX,
   DISPLAY_INLINE_BLOCK,
   EmptySelectorButton,
+  FLEX_MAX_CONTENT,
   Flex,
   Icon,
   JUSTIFY_SPACE_BETWEEN,
@@ -554,16 +555,18 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
                     pipettesByMount.right.pipetteName != null &&
                     pipettesByMount.left.tiprackDefURI != null &&
                     pipettesByMount.right.tiprackDefURI != null) ? null : (
-                    <EmptySelectorButton
-                      onClick={() => {
-                        setPage('add')
-                        setMount(targetPipetteMount)
-                        resetFields()
-                      }}
-                      text={t('add_pipette')}
-                      textAlignment="left"
-                      iconName="plus"
-                    />
+                    <Flex width={FLEX_MAX_CONTENT}>
+                      <EmptySelectorButton
+                        onClick={() => {
+                          setPage('add')
+                          setMount(targetPipetteMount)
+                          resetFields()
+                        }}
+                        text={t('add_pipette')}
+                        textAlignment="left"
+                        iconName="plus"
+                      />
+                    </Flex>
                   )}
                 </>
               </Flex>

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/AbsorbanceReaderTools/Initialization.tsx

@@ -10,6 +10,7 @@ import {
   Divider,
   DropdownMenu,
   EmptySelectorButton,
+  FLEX_MAX_CONTENT,
   Flex,
   Icon,
   InputField,
@@ -237,12 +238,14 @@ function IntializationEditor(props: InitializationEditorProps): JSX.Element {
           {wavelengthItems}
         </Flex>
         {mode === 'multi' && wavelengths.length < MAX_WAVELENGTHS ? (
-          <EmptySelectorButton
-            onClick={handleAddWavelength}
-            text={t('step_edit_form.absorbanceReader.add_wavelength.label')}
-            textAlignment="left"
-            disabled={numWavelengths === MAX_WAVELENGTHS}
-          />
+          <Flex width={FLEX_MAX_CONTENT}>
+            <EmptySelectorButton
+              onClick={handleAddWavelength}
+              text={t('step_edit_form.absorbanceReader.add_wavelength.label')}
+              textAlignment="left"
+              disabled={numWavelengths === MAX_WAVELENGTHS}
+            />
+          </Flex>
         ) : null}
       </Flex>
       {mode === 'single' ? (

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerProfileModal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import {
   DIRECTION_COLUMN,
   EmptySelectorButton,
+  FLEX_MAX_CONTENT,
   Flex,
   InfoScreen,
   JUSTIFY_FLEX_END,
@@ -98,28 +99,34 @@ export function ThermocyclerProfileModal(
         maxHeight="31.875rem"
       >
         <Flex justifyContent={JUSTIFY_FLEX_END} gridGap={SPACING.spacing4}>
-          <EmptySelectorButton
-            text={t('form:step_edit_form.field.thermocyclerProfile.add_cycle')}
-            onClick={() => {
-              if (canAddStepOrProfile) {
-                setShowCreateNewCycle(true)
-              }
-            }}
-            textAlignment="left"
-            iconName="plus"
-            disabled={!canAddStepOrProfile}
-          />
-          <EmptySelectorButton
-            text={t('form:step_edit_form.field.thermocyclerProfile.add_step')}
-            onClick={() => {
-              if (canAddStepOrProfile) {
-                setShowCreateNewStep(true)
-              }
-            }}
-            textAlignment="left"
-            iconName="plus"
-            disabled={!canAddStepOrProfile}
-          />
+          <Flex width={FLEX_MAX_CONTENT}>
+            <EmptySelectorButton
+              text={t(
+                'form:step_edit_form.field.thermocyclerProfile.add_cycle'
+              )}
+              onClick={() => {
+                if (canAddStepOrProfile) {
+                  setShowCreateNewCycle(true)
+                }
+              }}
+              textAlignment="left"
+              iconName="plus"
+              disabled={!canAddStepOrProfile}
+            />
+          </Flex>
+          <Flex width={FLEX_MAX_CONTENT}>
+            <EmptySelectorButton
+              text={t('form:step_edit_form.field.thermocyclerProfile.add_step')}
+              onClick={() => {
+                if (canAddStepOrProfile) {
+                  setShowCreateNewStep(true)
+                }
+              }}
+              textAlignment="left"
+              iconName="plus"
+              disabled={!canAddStepOrProfile}
+            />
+          </Flex>
         </Flex>
         {steps.length > 0 || showCreateNewStep || showCreateNewCycle ? (
           <Flex