From d9450104affca6ab9fda104b8cc008450de1966f Mon Sep 17 00:00:00 2001
From: Dan Rukas <dan.rukas@gmail.com>
Date: Tue, 5 Nov 2024 13:28:59 -0500
Subject: [PATCH] fix(ui) Study Browser small spacing changes (#4469)

---
 .../DisplaySetMessageListTooltip.tsx             | 12 ++++++------
 .../src/components/Thumbnail/Thumbnail.tsx       | 16 ++++++++--------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/platform/ui-next/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx b/platform/ui-next/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx
index 916ece328..4d59d78cd 100644
--- a/platform/ui-next/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx
+++ b/platform/ui-next/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx
@@ -20,20 +20,20 @@ const DisplaySetMessageListTooltip = ({ messages, id }): React.ReactNode => {
               <Icons.StatusWarning className="h-[20px] w-[20px]" />
             </TooltipTrigger>
             <TooltipContent side="right">
-              <div className="max-w-64 text-left text-base text-white">
+              <div className="max-w-68 text-left text-base text-white">
                 <div
-                  className="break-normal text-base font-bold text-blue-300"
+                  className="break-normal text-base font-semibold text-blue-300"
                   style={{
-                    marginLeft: '12px',
-                    marginTop: '12px',
+                    marginLeft: '4px',
+                    marginTop: '4px',
                   }}
                 >
                   {t('Display Set Messages')}
                 </div>
                 <ol
                   style={{
-                    marginLeft: '12px',
-                    marginRight: '12px',
+                    marginLeft: '4px',
+                    marginRight: '4px',
                   }}
                 >
                   {messages.messages.map((message, index) => (
diff --git a/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx b/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
index 7f5686923..9dec4be9a 100644
--- a/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
+++ b/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
@@ -82,7 +82,7 @@ const Thumbnail = ({
             )}
 
             {/* bottom left */}
-            <div className="bg-muted absolute bottom-0 left-0 flex h-[14px] items-center gap-[4px] p-[4px]">
+            <div className="bg-muted absolute bottom-0 left-0 flex h-[14px] items-center gap-[4px] rounded-tr pt-[10px] pb-[8px] pr-[6px] pl-[3px]">
               <div
                 className={classnames(
                   'h-[10px] w-[10px] rounded-[2px]',
@@ -90,7 +90,7 @@ const Thumbnail = ({
                   loadingProgress && loadingProgress < 1 && 'bg-primary/25'
                 )}
               ></div>
-              <div className="text-[11px] text-white">{modality}</div>
+              <div className="text-[11px] font-semibold text-white">{modality}</div>
             </div>
 
             {/* top right */}
@@ -168,12 +168,12 @@ const Thumbnail = ({
           </div>
         </div>
         <div className="flex h-[52px] w-[128px] flex-col">
-          <div className="min-h-[18px] w-[128px] overflow-hidden text-ellipsis text-[12px] text-white">
+          <div className="min-h-[18px] w-[128px] overflow-hidden text-ellipsis pb-0.5 pl-1 text-[12px] font-normal leading-4 text-white">
             {description}
           </div>
           <div className="flex h-[12px] items-center gap-[7px] overflow-hidden">
-            <div className="text-muted-foreground text-[12px]"> S:{seriesNumber}</div>
-            <div className="text-muted-foreground text-[12px]">
+            <div className="text-muted-foreground pl-1 text-[11px]"> S:{seriesNumber}</div>
+            <div className="text-muted-foreground text-[11px]">
               <div className="flex items-center gap-[4px]">
                 {' '}
                 {countIcon ? (
@@ -203,9 +203,9 @@ const Thumbnail = ({
           ></div>
           <div className="flex h-full flex-col">
             <div className="flex items-center gap-[7px]">
-              <div className="text-[13px] text-white">{modality}</div>
+              <div className="text-[13px] font-semibold text-white">{modality}</div>
 
-              <div className="max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-[13px] text-white">
+              <div className="max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-[13px] font-normal text-white">
                 {description}
               </div>
             </div>
@@ -302,7 +302,7 @@ const Thumbnail = ({
     <div
       className={classnames(
         className,
-        'bg-muted hover:bg-primary/30 group flex cursor-pointer select-none flex-col outline-none',
+        'bg-muted hover:bg-primary/30 group flex cursor-pointer select-none flex-col rounded outline-none',
         viewPreset === 'thumbnails' && 'h-[170px] w-[135px]',
         viewPreset === 'list' && 'col-span-2 h-[40px] w-[275px]'
       )}