fix(protocol-designer): add align-items to title part (#17165)

* fix(protocol-designer): add align-items to title part

Author: koji

protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 
 import {
+  ALIGN_CENTER,
   Btn,
   COLORS,
   DIRECTION_COLUMN,
@@ -77,7 +78,7 @@ export function InstrumentsInfo({
 
   return (
     <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}>
-      <Flex justifyContent={JUSTIFY_SPACE_BETWEEN}>
+      <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER}>
         <StyledText desktopStyle="headingSmallBold">
           {t('instruments')}
         </StyledText>

protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import {
+  ALIGN_CENTER,
   Btn,
   COLORS,
   DIRECTION_COLUMN,
@@ -36,7 +37,7 @@ export function ProtocolMetadata({
 
   return (
     <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}>
-      <Flex justifyContent={JUSTIFY_SPACE_BETWEEN}>
+      <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER}>
         <StyledText desktopStyle="headingSmallBold">
           {t('protocol_metadata')}
         </StyledText>