From 4f8281b04a1eae6890e7ecd94f8a61c281217d3f Mon Sep 17 00:00:00 2001
From: Dan Rukas <dan.rukas@gmail.com>
Date: Tue, 12 Nov 2024 17:21:05 -0500
Subject: [PATCH] fix(ui): Scrolling and display fixes for study panel (#4494)

---
 .../components/StudyBrowser/StudyBrowser.tsx  | 30 +++++++++----------
 .../src/components/StudyItem/StudyItem.tsx    |  1 +
 .../src/components/Thumbnail/Thumbnail.tsx    |  4 +--
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx b/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx
index 99ef692bb..540b80bba 100644
--- a/platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx
+++ b/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>
   );
 };
diff --git a/platform/ui-next/src/components/StudyItem/StudyItem.tsx b/platform/ui-next/src/components/StudyItem/StudyItem.tsx
index cd878cf01..00b5d946a 100644
--- a/platform/ui-next/src/components/StudyItem/StudyItem.tsx
+++ b/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}
diff --git a/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx b/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
index 1baba4cbd..401972e0b 100644
--- a/platform/ui-next/src/components/Thumbnail/Thumbnail.tsx
+++ b/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]">