fix(visual): title, manuscript card improvements

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

@@ -13,6 +13,7 @@ import {
   Item,
   IconButton,
   ActionLink,
+  TextTooltip,
   AuthorTagList,
   ReviewerBreakdown,
 } from './'
@@ -38,7 +39,9 @@ const ManuscriptCard = ({
     <Root data-test-id={`fragment-${fragmentId}`} onClick={onCardClick}>
       <MainContainer>
         <Row alignItems="center" justify="space-between">
-          <H3>{title}</H3>
+          <TextTooltip title={title}>
+            <H3>{title}</H3>
+          </TextTooltip>
           <Tag data-test-id="fragment-status" status>
             {visibleStatus}
           </Tag>
@@ -52,17 +55,11 @@ const ManuscriptCard = ({
           <Text customId mr={1}>{`ID ${customId}`}</Text>
           {submitted && (
             <DateParser humanizeThreshold={0} timestamp={submitted}>
-              {timestamp => (
-                <Text mr={3} secondary>
-                  Submitted on {timestamp}
-                </Text>
-              )}
+              {timestamp => <Text mr={3}>Submitted on {timestamp}</Text>}
             </DateParser>
           )}
-          <H4>{manuscriptType.label || type}</H4>
-          <Text ml={1} secondary>
-            {journal}
-          </Text>
+          <Text>{manuscriptType.label || type}</Text>
+          <Text ml={1}>{journal}</Text>
         </Row>
         <Row alignItems="center" justify="flex-start" mb={1}>
           <H4>Handling editor</H4>
@@ -127,10 +124,19 @@ const MainContainer = styled.div`
   flex-direction: column;
   padding: calc(${th('gridUnit')} * 2);
   padding-bottom: ${th('gridUnit')};
+  width: 100%;
 
   ${Row} {
+    [data-tooltipped] {
+      overflow: hidden;
+    }
     ${H3} {
       margin-bottom: 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      padding-right: ${th('gridUnit')};
+      flex: 11;
     }
   }
 `

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

@@ -45,7 +45,7 @@ export default compose(
         <Fragment>
           {!!label && <Label>{label}</Label>}
           {reviewerInvitations.length ? (
-            <Text secondary>
+            <Text>
               {`${reviewerInvitations.length} invited, ${
                 report.accepted
               } agreed, ${report.declined} declined, ${
@@ -53,7 +53,7 @@ export default compose(
               } submitted`}
             </Text>
           ) : (
-            <Text secondary> {`${reviewerInvitations.length} invited`}</Text>
+            <Text> {`${reviewerInvitations.length} invited`}</Text>
           )}
         </Fragment>
       )

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

+import React, { Fragment } from 'react'
+import 'react-tippy/dist/tippy.css'
+import { Tooltip } from 'react-tippy'
+import { ThemeProvider, withTheme } from 'styled-components'
+import { Text, Row } from 'pubsweet-component-faraday-ui'
+
+const TitleTooltip = ({ theme = {}, title = '' }) => (
+  <ThemeProvider theme={theme}>
+    <Fragment>
+      <Row mt={1}>
+        <Text>{title}</Text>
+      </Row>
+    </Fragment>
+  </ThemeProvider>
+)
+
+const TextTooltip = ({ theme = {}, children, ...rest }) => (
+  <Tooltip
+    arrow
+    html={<TitleTooltip theme={theme} {...rest} />}
+    position="bottom"
+    theme="light"
+  >
+    {children}
+  </Tooltip>
+)
+
+export default withTheme(TextTooltip)

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

+Wrap component with simple tooltip
+
+```js
+const title = 'β-Carboline Silver Compound Binding Studies with Human Serum Albumin: A Comprehensive Multispectroscopic Analysis and Molecular Modeling Study'
+
+;<TextTooltip title={title}>
+  <div>{title}</div>
+</TextTooltip>
+```

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

@@ -32,6 +32,7 @@ export { default as Text } from './Text'
 export { default as Textarea } from './Textarea'
 export { default as WizardAuthors } from './WizardAuthors'
 export { default as WizardFiles } from './WizardFiles'
+export { default as TextTooltip } from './TextTooltip'
 
 export * from './manuscriptDetails'
 export * from './contextualBoxes'

packages/components-faraday/src/components/Dashboard/DashboardItems.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { H3 } from '@pubsweet/ui'
 import { get, has } from 'lodash'
 import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
 import { withRouter } from 'react-router-dom'
 import { ManuscriptCard, Row } from 'pubsweet-component-faraday-ui'
 import { compose, setDisplayName, withHandlers } from 'recompose'
@@ -53,7 +54,7 @@ export default compose(
 
 // #region styles
 const Root = styled.div`
-  height: calc(100vh - 204px);
+  height: calc(100vh - ${th('gridUnit')} * 21);
   overflow-y: auto;
   overflow-x: hidden;
   div[open] {