From 68df09219599441dffb1e5be9785f1477fb18d0a Mon Sep 17 00:00:00 2001
From: kjacks <kjack227@gmail.com>
Date: Thu, 17 Sep 2020 11:00:04 +0200
Subject: [PATCH 1/5] ensured unique entity ids in ref mode to avoid keying
 error

---
 ui/src/components/Entity/EntityReferencesMode.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/Entity/EntityReferencesMode.jsx b/ui/src/components/Entity/EntityReferencesMode.jsx
index ea58cea6f6..a4dff3e60f 100644
--- a/ui/src/components/Entity/EntityReferencesMode.jsx
+++ b/ui/src/components/Entity/EntityReferencesMode.jsx
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React from 'react';
 import { Waypoint } from 'react-waypoint';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -115,7 +116,7 @@ class EntityReferencesMode extends React.Component {
       return <ErrorSection icon="graph" title={intl.formatMessage(messages.no_relationships)} />;
     }
     const { property } = reference;
-    const results = ensureArray(result.results);
+    const results = _.uniqBy(ensureArray(result.results), 'id');
     const columns = schema.getFeaturedProperties().filter(prop => prop.name !== property.name);
     return (
       <section className="EntityReferencesTable">

From fe65938afc6ef7c65581554bd9519365b5e59a01 Mon Sep 17 00:00:00 2001
From: kjacks <kjack227@gmail.com>
Date: Thu, 17 Sep 2020 11:06:04 +0200
Subject: [PATCH 2/5] Added null catch for animated count component

---
 ui/src/components/common/AnimatedCount.jsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/common/AnimatedCount.jsx b/ui/src/components/common/AnimatedCount.jsx
index 26c2d2d133..856bc23f0d 100644
--- a/ui/src/components/common/AnimatedCount.jsx
+++ b/ui/src/components/common/AnimatedCount.jsx
@@ -4,11 +4,16 @@ import { Skeleton } from 'components/common';
 
 import './AnimatedCount.scss';
 
-const AnimatedCount = ({ count, isPending, label}) => (
-  <div className="AnimatedCount">
-    {isPending && <Skeleton.Text className="AnimatedCount__count" type="span" length="3" />}
-    {!isPending && <CountUp className="AnimatedCount__count" end={count} separator="," />}
-    <p className="AnimatedCount__label">{label}</p>
-  </div>
-)
+const AnimatedCount = ({ count, isPending, label}) => {
+  if (!isPending && count === undefined) {
+    return null;
+  }
+  return (
+    <div className="AnimatedCount">
+      {isPending && <Skeleton.Text className="AnimatedCount__count" type="span" length="3" />}
+      {!isPending && <CountUp className="AnimatedCount__count" end={count} separator="," />}
+      <p className="AnimatedCount__label">{label}</p>
+    </div>
+  );
+}
 export default AnimatedCount;

From cd17fb945e8b2d8b109fe6dc670b418ac34ddc5a Mon Sep 17 00:00:00 2001
From: kjacks <kjack227@gmail.com>
Date: Thu, 17 Sep 2020 11:06:32 +0200
Subject: [PATCH 3/5] Wrapped home screen animated counts on mobile

---
 ui/src/screens/HomeScreen/HomeScreen.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/screens/HomeScreen/HomeScreen.jsx b/ui/src/screens/HomeScreen/HomeScreen.jsx
index 6670e084a2..45825edd4a 100644
--- a/ui/src/screens/HomeScreen/HomeScreen.jsx
+++ b/ui/src/screens/HomeScreen/HomeScreen.jsx
@@ -90,7 +90,7 @@ export class HomeScreen extends Component {
                   placeholder={intl.formatMessage(messages.placeholder, { samples: samplesList })}
                   inputProps={{ large: true, autoFocus: true }}
                 />
-                <div className="HomeScreen__thirds no-wrap">
+                <div className="HomeScreen__thirds">
                   <AnimatedCount
                     count={statistics?.things}
                     isPending={statistics.isPending}

From 175afcfe998945f4ae4b5da3ed866876ade0f9ac Mon Sep 17 00:00:00 2001
From: kjacks <kjack227@gmail.com>
Date: Thu, 17 Sep 2020 11:24:03 +0200
Subject: [PATCH 4/5] CollectionIndexItem styling for small screen overflow of
 long titles

---
 ui/src/app/App.scss                                       | 4 +++-
 ui/src/components/CollectionIndex/CollectionIndexItem.jsx | 2 +-
 ui/src/components/common/Role.jsx                         | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/src/app/App.scss b/ui/src/app/App.scss
index d6c148ec96..960cae6c32 100644
--- a/ui/src/app/App.scss
+++ b/ui/src/app/App.scss
@@ -168,12 +168,13 @@ a {
 
   &__title {
     font-weight: bold;
+    margin-right: $aleph-grid-size*3;
 
     &__text {
       display: inline-flex;
 
       .bp3-icon {
-        align-self: center;
+        margin-top: 2px;
       }
     }
   }
@@ -187,6 +188,7 @@ a {
   &__count {
     @include rtl(float, right, left);
     display: block;
+    margin-top: 2px;
   }
 
   &__details {
diff --git a/ui/src/components/CollectionIndex/CollectionIndexItem.jsx b/ui/src/components/CollectionIndex/CollectionIndexItem.jsx
index 64922e334a..fd466fe2a9 100644
--- a/ui/src/components/CollectionIndex/CollectionIndexItem.jsx
+++ b/ui/src/components/CollectionIndex/CollectionIndexItem.jsx
@@ -72,7 +72,7 @@ class CollectionIndexItem extends PureComponent {
           { collection.casefile && (
             <span className="index-item__details__item">
               <Icon icon="social-media" />
-              <Role.List roles={collection.team} icon={false} truncate={3} separateItems />
+              <Role.List roles={collection.team} icon={false} truncate={3} truncateItem={20} separateItems />
             </span>
           )}
         </p>
diff --git a/ui/src/components/common/Role.jsx b/ui/src/components/common/Role.jsx
index 8c49d4b60f..ce0204374f 100644
--- a/ui/src/components/common/Role.jsx
+++ b/ui/src/components/common/Role.jsx
@@ -59,7 +59,8 @@ class RoleList extends PureComponent {
     const { roles, separateItems, truncate = Infinity, truncateItem } = this.props;
     if (!roles) return null;
 
-    let names = roles.map(role => <RoleLink key={role.id} role={role} truncate={truncateItem} {...this.props} />);
+
+    let names = roles.map(role => <RoleLink key={role.id} role={role} truncate={truncateItem} />);
 
     // Truncate if too long
     if (names.length > truncate) {

From 44debd693d374ddc2db94a072489dfede395cae9 Mon Sep 17 00:00:00 2001
From: kjacks <kjack227@gmail.com>
Date: Thu, 17 Sep 2020 11:51:08 +0200
Subject: [PATCH 5/5] Max width for collection item title

---
 ui/src/app/App.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/app/App.scss b/ui/src/app/App.scss
index 960cae6c32..821b3256e5 100644
--- a/ui/src/app/App.scss
+++ b/ui/src/app/App.scss
@@ -169,6 +169,7 @@ a {
   &__title {
     font-weight: bold;
     margin-right: $aleph-grid-size*3;
+    max-width: $aleph-content-width-limit;
 
     &__text {
       display: inline-flex;