From 89cbe5bf2e15cdf5a40d361767d4944a722789a2 Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Fri, 10 Jul 2020 15:52:58 -0300
Subject: [PATCH] fix: OHIF-255 Fixes Thumbnail height for active item (#1876)

---
 platform/ui/src/components/Thumbnail/Thumbnail.jsx         | 7 +++++--
 .../src/components/ThumbnailNoImage/ThumbnailNoImage.jsx   | 5 ++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx
index 0dec1d417..635e9f148 100644
--- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx
+++ b/platform/ui/src/components/Thumbnail/Thumbnail.jsx
@@ -50,11 +50,14 @@ const Thumbnail = ({
       <div ref={drag}>
         <div
           className={classnames(
-            'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white overflow-hidden mb-2 min-h-32',
+            'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white overflow-hidden min-h-32',
             isActive
               ? 'border-2 border-primary-light'
               : 'border border-secondary-light group-focus:border-blue-300 hover:border-blue-300'
           )}
+          style={{
+            margin: isActive ? '0' : '1px',
+          }}
         >
           {imageSrc ? (
             <img
@@ -66,7 +69,7 @@ const Thumbnail = ({
             <div>{imageAltText}</div>
           )}
         </div>
-        <div className="flex flex-row items-center flex-1 text-base text-blue-300">
+        <div className="flex flex-row items-center flex-1 text-base text-blue-300 pt-2">
           <div className="mr-4">
             <span className="font-bold text-primary-main">{'S: '}</span>
             {seriesNumber}
diff --git a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
index 90ff0d9d1..d1a336e15 100644
--- a/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
+++ b/platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
@@ -30,9 +30,12 @@ const ThumbnailNoImage = ({
       ref={thumbnailElement}
       onFocus={() => blurHandlerListener(thumbnailElement)}
       className={classnames(
-        'flex flex-row flex-1 px-4 py-3 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded select-none',
+        'flex flex-row flex-1 cursor-pointer outline-none border-transparent hover:border-blue-300 focus:border-blue-300 rounded select-none',
         isActive ? 'border-2 border-primary-light' : 'border'
       )}
+      style={{
+        padding: isActive ? '11px' : '12px',
+      }}
       id={`thumbnail-${displaySetInstanceUID}`}
       onClick={onClick}
       onDoubleClick={onDoubleClick}