fix(manuscript-card): fix reviewer reports breakdown on manuscript card

packages/component-faraday-ui/src/Label.js

@@ -3,8 +3,10 @@ import { H4 } from '@pubsweet/ui'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 
-const Label = ({ children, required = false }) => (
-  <Root>
+import { marginHelper } from './'
+
+const Label = ({ children, required = false, ...rest }) => (
+  <Root {...rest}>
     <H4>{children}</H4>
     {required && <Required>*</Required>}
   </Root>
@@ -22,6 +24,8 @@ const Root = styled.div`
   align-items: center;
   display: flex;
 
+  ${marginHelper};
+
   ${H4} {
     margin: 0;
   }

packages/component-faraday-ui/src/ManuscriptCard.js

-import React from 'react'
+import React, { Fragment } from 'react'
 import { get } from 'lodash'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
@@ -11,6 +11,7 @@ import {
   Text,
   Row,
   Item,
+  Label,
   IconButton,
   ActionLink,
   TextTooltip,
@@ -76,7 +77,10 @@ const ManuscriptCard = ({
             {get(handlingEditor, 'name', 'Unassigned')}
           </Text>
           {handlingEditor && (
-            <ReviewerBreakdown fragment={fragment} label="Reviewer Reports" />
+            <Fragment>
+              <Label mr={1}>Reviewers Reports</Label>
+              <ReviewerBreakdown fragment={fragment} label="Reviewer Reports" />
+            </Fragment>
           )}
           {canDelete && (
             <Item justify="flex-end" onClick={e => e.stopPropagation()}>

packages/component-faraday-ui/src/ReviewerBreakdown.js

@@ -35,7 +35,7 @@ export default compose(
         submitted: 0,
       })
       return reviewerInvitations.length ? (
-        <Row justify="flex-end" {...rest}>
+        <Row fitContent justify="flex-end" {...rest}>
           <Text customId mr={1 / 2}>
             {reviewerInvitations.length}
           </Text>