ui(fix): Study panel scrollbar fix and updates (#4951)

platform/ui-next/src/components/Thumbnail/Thumbnail.tsx

@@ -63,7 +63,7 @@ const Thumbnail = ({
       <div
         className={classnames(
           'flex h-full w-full flex-col items-center justify-center gap-[2px] p-[4px]',
-          isActive && 'bg-popover'
+          isActive && 'bg-popover rounded'
         )}
       >
         <div className="h-[114px] w-[128px]">
@@ -80,7 +80,7 @@ const Thumbnail = ({
             )}
 
             {/* bottom left */}
-            <div className="absolute bottom-0 left-0 flex h-[14px] items-center gap-[4px] rounded-tr pt-[10px] pb-[8px] pr-[6px] pl-[3px]">
+            <div className="absolute bottom-0 left-0 flex h-[14px] items-center gap-[4px] rounded-tr pt-[10px] pb-[10px] pr-[6px] pl-[5px]">
               <div
                 className={classnames(
                   'h-[10px] w-[10px] rounded-[2px]',
@@ -135,7 +135,7 @@ const Thumbnail = ({
             </div>
           </div>
         </div>
-        <div className="flex h-[52px] w-[128px] flex-col justify-end">
+        <div className="flex h-[52px] w-[128px] flex-col justify-start pt-px">
           <Tooltip>
             <TooltipContent>{description}</TooltipContent>
             <TooltipTrigger>
@@ -167,18 +167,18 @@ const Thumbnail = ({
       <div
         className={classnames(
           'flex h-full w-full items-center justify-between pr-[8px] pl-[8px] pt-[4px] pb-[4px]',
-          isActive && 'bg-popover'
+          isActive && 'bg-popover rounded'
         )}
       >
         <div className="relative flex h-[32px] w-full items-center gap-[8px] overflow-hidden">
           <div
             className={classnames(
-              'h-[32px] w-[4px] min-w-[4px] rounded-[2px]',
+              'h-[32px] w-[4px] min-w-[4px] rounded',
               isActive || isHydratedForDerivedDisplaySet ? 'bg-highlight' : 'bg-primary/65',
               loadingProgress && loadingProgress < 1 && 'bg-primary/25'
             )}
           ></div>
-          <div className="flex h-full w-[calc(100%-12px)] flex-col">
+          <div className="flex h-full w-[calc(100%-12px)] flex-col justify-start">
             <div className="flex items-center gap-[7px]">
               <div className="text-[13px] font-semibold text-white">{modality}</div>
               <Tooltip>

platform/ui-next/src/components/ThumbnailList/ThumbnailList.tsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 import { Thumbnail } from '../Thumbnail';
 import { useDynamicMaxHeight } from '../../hooks/useDynamicMaxHeight';
-import { ScrollArea } from '../ScrollArea';
 
 const ThumbnailList = ({
   thumbnails,
@@ -27,11 +26,10 @@ const ThumbnailList = ({
   );
 
   return (
-    <ScrollArea className="flex flex-col gap-[4px] pt-[4px] pr-[2.5px] pl-[5px] pb-[4px]">
+    <div className="flex flex-col">
       <div
         ref={ref}
-        style={{ maxHeight: maxHeight, minHeight: '300px' }}
-        className="flex flex-col gap-[4px] pt-[4px] pr-[2.5px] pl-[5px] pb-[4px]"
+        className="flex flex-col gap-[2px] pt-[4px] pr-[2.5px] pl-[5px] pb-[4px]"
       >
         {thumbnailItems.length > 0 && (
           <div
@@ -88,7 +86,7 @@ const ThumbnailList = ({
           </div>
         )}
       </div>
-    </ScrollArea>
+    </div>
   );
 };