fix(manuscript-layout): add padding bottom to manuscript layout

packages/component-faraday-ui/src/AuthorCard.md

@@ -8,16 +8,32 @@ const author = {
   affiliation: 'PSD',
   isSubmitting: true,
   isCorresponding: true,
-};
-
-<div>
+}
+;<div>
   <AuthorCard
     onEdit={() => console.log('s-a dat click pe edit')}
     index={0}
     item={author}
+    deleteAuthor={item => () => {
+      console.log('delete author', item)
+    }}
+  />
+  <AuthorCard
+    onEdit={() => console.log('s-a dat click pe edit')}
+    index={1}
+    item={author}
+    deleteAuthor={item => () => {
+      console.log('delete author', item)
+    }}
+  />
+  <AuthorCard
+    onEdit={() => console.log('s-a dat click pe edit')}
+    index={2}
+    item={author}
+    deleteAuthor={item => () => {
+      console.log('delete author', item)
+    }}
   />
-  <AuthorCard onEdit={() => console.log('s-a dat click pe edit')} index={1} item={author} />
-  <AuthorCard onEdit={() => console.log('s-a dat click pe edit')} index={2} item={author} />
 </div>
 ```
 
@@ -31,7 +47,12 @@ const author = {
   affiliation: 'PSD',
   isSubmitting: true,
   isCorresponding: true,
-};
-
-<AuthorCard item={author} dragHandle={DragHandle} />
+}
+;<AuthorCard
+  item={author}
+  dragHandle={DragHandle}
+  deleteAuthor={item => () => {
+    console.log('delete author', item)
+  }}
+/>
 ```

packages/component-faraday-ui/src/AuthorTagList.md

@@ -78,12 +78,14 @@ A list of author tags with tooltip
 ```js
 const authors = [
   {
+    id: 1,
     email: 'john.doe@gmail.com',
     firstName: 'John',
     lastName: 'Doe',
     isSubmitting: true,
   },
   {
+    id: 2,
     email: 'michael.felps@gmail.com',
     firstName: 'Michael',
     lastName: 'Felps',
@@ -91,6 +93,7 @@ const authors = [
     isCorresponding: true,
   },
   {
+    id: 3,
     email: 'barrack.obama@gmail.com',
     firstName: 'Barrack',
     lastName: 'Obama',

packages/component-faraday-ui/src/ContextualBox.md

@@ -77,9 +77,11 @@ Render custom components on the right side of the header.
 React components can be passed as right children too. All the props provided to the contextual box are also passed to the right header children.
 
 ```js
-const MyRightComponent = ({headLabel}) => <div>{headLabel}: 1 accepted, 4 denied</div>;
+const MyRightComponent = ({ headLabel }) => (
+  <div>{headLabel}: 1 accepted, 4 denied</div>
+)
 
-<ContextualBox
+;<ContextualBox
   headLabel="I am the right header * "
   label="React component to the right"
   rightChildren={MyRightComponent}
@@ -114,10 +116,10 @@ const MyRightComponent = ({headLabel}) => <div>{headLabel}: 1 accepted, 4 denied
 A controlled ContextualBox.
 
 ```js
-const MyRightComponent = () => <div>works like a charm!</div>;
+const MyRightComponent = () => <div>works like a charm!</div>
 
-<RemoteOpener>
-  {(expanded, toggle) => (
+;<RemoteOpener>
+  {({ expanded, toggle }) => (
     <div>
       <button onClick={toggle}>Toggle</button>
       <ContextualBox

packages/component-manuscript/src/components/ManuscriptLayout.js

@@ -63,7 +63,7 @@ const ManuscriptLayout = ({
   submittedOwnRecommendation,
   reviewerReports,
 }) => (
-  <Root pb={1}>
+  <Root pb={30}>
     {!isEmpty(collection) && !isEmpty(fragment) ? (
       <Fragment>
         <ManuscriptDetailsTop