fix(ui): Scrolling and display fixes for study panel (#4494)

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

@@ -71,24 +71,22 @@ const StudyBrowser = ({
 
   return (
     <div
-      className="ohif-scrollbar invisible-scrollbar bg-bkg-low flex flex-1 flex-col gap-[4px] overflow-auto"
+      className="ohif-scrollbar invisible-scrollbar bg-bkg-low flex flex-1 flex-col gap-[4px] overflow-auto pt-px"
       data-cy={'studyBrowser-panel'}
     >
-      <div>
-        {showSettings && (
-          <div className="w-100 bg-bkg-low flex h-[48px] items-center justify-center gap-[10px] px-[8px] py-[10px]">
-            <>
-              <StudyBrowserViewOptions
-                tabs={tabs}
-                onSelectTab={onClickTab}
-                activeTabName={activeTabName}
-              />
-              <StudyBrowserSort servicesManager={servicesManager} />
-            </>
-          </div>
-        )}
-        {getTabContent()}
-      </div>
+      {showSettings && (
+        <div className="w-100 bg-bkg-low flex h-[48px] items-center justify-center gap-[10px] px-[8px] py-[10px]">
+          <>
+            <StudyBrowserViewOptions
+              tabs={tabs}
+              onSelectTab={onClickTab}
+              activeTabName={activeTabName}
+            />
+            <StudyBrowserSort servicesManager={servicesManager} />
+          </>
+        </div>
+      )}
+      {getTabContent()}
     </div>
   );
 };

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

@@ -27,6 +27,7 @@ const StudyItem = ({
       collapsible
       onClick={onClick}
       onKeyDown={() => {}}
+      className="flex-shrink-0"
       role="button"
       tabIndex={0}
       defaultValue={isActive ? 'study-item' : undefined}

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

@@ -70,7 +70,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]">
@@ -202,7 +202,7 @@ 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] items-center gap-[8px]">