From 0717893e56061c49eb3ff7be52a08456e920e048 Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Tue, 16 Jun 2020 23:15:40 -0400
Subject: [PATCH] Force descriptions to wrap if they would overflow container
 (thumbnails)

---
 platform/ui/src/components/Thumbnail/Thumbnail.jsx   |  2 +-
 .../components/ThumbnailNoImage/ThumbnailNoImage.jsx | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx
index 15dfd93a4..44460fa8a 100644
--- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx
+++ b/platform/ui/src/components/Thumbnail/Thumbnail.jsx
@@ -68,7 +68,7 @@ const Thumbnail = ({
           <Icon name="group-layers" className="w-3 mr-2" /> {numInstances}
         </div>
       </div>
-      <div className="text-base text-white">{description}</div>
+      <div className="text-base text-white break-all">{description}</div>
     </div>
   );
 };
diff --git a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
index e0d2f17d8..0f01bd9ce 100644
--- a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
+++ b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
@@ -28,14 +28,16 @@ const ThumbnailNoImage = ({
       tabIndex="0"
     >
       <div className="flex flex-col flex-1">
-        <div className="flex flex-row flex-1 items-center mb-2">
-          <Icon name="list-bullets" className="text-secondary-light w-12" />
-          <div className="px-3 bg-primary-main rounded-sm mr-4 text-lg text-white">
+        <div className="flex flex-row items-center flex-1 mb-2">
+          <Icon name="list-bullets" className="w-12 text-secondary-light" />
+          <div className="px-3 mr-4 text-lg text-white rounded-sm bg-primary-main">
             {modality}
           </div>
-          <span className="text-blue-300 text-base">{seriesDate}</span>
+          <span className="text-base text-blue-300">{seriesDate}</span>
+        </div>
+        <div className="ml-12 text-base text-white break-all">
+          {description}
         </div>
-        <div className="text-white text-base ml-12">{description}</div>
       </div>
     </div>
   );