From b9dbc5b3a5b50ea9666bb273425914def7a6ea3b Mon Sep 17 00:00:00 2001
From: Braden Morley <63816946+bradenjmorley@users.noreply.github.com>
Date: Thu, 9 Mar 2023 19:25:05 +0000
Subject: [PATCH] fix(thumbnails): expand multi studies scrollbar (#3224)

made per study scrollbars visible
---
 platform/ui/src/assets/styles/styles.css                   | 4 ++++
 platform/ui/src/components/StudyBrowser/StudyBrowser.tsx   | 4 ++--
 platform/ui/src/components/ThumbnailList/ThumbnailList.tsx | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/platform/ui/src/assets/styles/styles.css b/platform/ui/src/assets/styles/styles.css
index 9cb7c3fbe..addaa2375 100644
--- a/platform/ui/src/assets/styles/styles.css
+++ b/platform/ui/src/assets/styles/styles.css
@@ -4,6 +4,10 @@
   scrollbar-gutter: stable;
 }
 
+.study-min-height {
+  min-height: 450px;
+}
+
 .ohif-scrollbar:hover {
   overflow-y: auto;
 }
diff --git a/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx b/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
index 37993c58e..9d7e6a2ec 100644
--- a/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
+++ b/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
@@ -109,7 +109,7 @@ const StudyBrowser = ({
           })}
         </ButtonGroup>
       </div>
-      <div className="flex flex-col flex-1 overflow-auto">
+      <div className="flex flex-col flex-1 overflow-auto ohif-scrollbar invisible-scrollbar">
         {getTabContent()}
       </div>
     </React.Fragment>
@@ -171,7 +171,7 @@ StudyBrowser.propTypes = {
   ),
 };
 
-const noop = () => {};
+const noop = () => { };
 
 StudyBrowser.defaultProps = {
   onClickTab: noop,
diff --git a/platform/ui/src/components/ThumbnailList/ThumbnailList.tsx b/platform/ui/src/components/ThumbnailList/ThumbnailList.tsx
index 7a3c01661..f739cf281 100644
--- a/platform/ui/src/components/ThumbnailList/ThumbnailList.tsx
+++ b/platform/ui/src/components/ThumbnailList/ThumbnailList.tsx
@@ -12,7 +12,7 @@ const ThumbnailList = ({
   activeDisplaySetInstanceUIDs = [],
 }) => {
   return (
-    <div className="py-3 bg-black overflow-y-hidden ohif-scrollbar">
+    <div className="py-3 bg-black overflow-y-hidden ohif-scrollbar study-min-height">
       {thumbnails.map(
         ({
           displaySetInstanceUID,