style(submission): fix error for dropdown menu

packages/component-wizard/src/components/StepTwo.js

-import React from 'react'
+import React, { Fragment } from 'react'
 import { get } from 'lodash'
 import { Field } from 'redux-form'
 import { Tooltip } from 'react-tippy'
@@ -28,7 +28,7 @@ const StepTwo = ({
   manuscriptTypes,
   ...rest
 }) => (
-  <Root>
+  <Fragment>
     <Row alignItems="center" mb={1}>
       <H2>2. Manuscript & Author Details</H2>
     </Row>
@@ -49,7 +49,7 @@ const StepTwo = ({
           validate={[required]}
         />
       </Item>
-      <Item data-test-id="submission-type" vertical>
+      <ItemOverrideAlert data-test-id="submission-type" vertical>
         <Label required>MANUSCRIPT TYPE</Label>
         <ValidatedField
           component={input => (
@@ -62,10 +62,10 @@ const StepTwo = ({
           name="metadata.type"
           validate={[required]}
         />
-      </Item>
+      </ItemOverrideAlert>
     </Row>
 
-    <Row mb={2}>
+    <RowOverrideAlert mb={2}>
       <Item data-test-id="submission-abstract" vertical>
         <Label required>ABSTRACT</Label>
         <ValidatedField
@@ -75,7 +75,7 @@ const StepTwo = ({
           validate={[required]}
         />
       </Item>
-    </Row>
+    </RowOverrideAlert>
 
     <Field component={Empty} name="authors" />
     <WizardAuthors
@@ -124,7 +124,7 @@ const StepTwo = ({
         </Item>
       </Row>
     )}
-  </Root>
+  </Fragment>
 )
 
 export default StepTwo
@@ -146,8 +146,14 @@ const ConflictsTooltip = () => (
 
 // #region styled-components
 
-const Root = styled.div`
-  textarea + div[role='alert'] {
+const RowOverrideAlert = styled(Row)`
+  div[role='alert'] {
+    margin-top: 0;
+  }
+`
+
+const ItemOverrideAlert = styled(Item)`
+  div[role='alert'] {
     margin-top: 0;
   }
 `