fix: OHIF-255 Fixes Thumbnail height for active item (#1876)

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}

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}