From c6a9571915469035614df5558267777001d9a44d Mon Sep 17 00:00:00 2001
From: Bill Wallace <wayfarer3130@gmail.com>
Date: Fri, 14 Jan 2022 15:23:13 -0500
Subject: [PATCH] fix: Scrollbars on the thumbnails to be auto visible (#2605)

The thumbnail view had hte scrollbars not visible and they didn't
appear, and that made it hard to discover how to scroll.
---
 platform/ui/src/assets/styles/styles.css                     | 5 +++++
 .../ui/src/components/MeasurementTable/MeasurementTable.jsx  | 2 +-
 platform/ui/src/components/StudyBrowser/StudyBrowser.jsx     | 2 +-
 platform/ui/src/components/ThumbnailList/ThumbnailList.jsx   | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/platform/ui/src/assets/styles/styles.css b/platform/ui/src/assets/styles/styles.css
index dca1088cd..15c8ba199 100644
--- a/platform/ui/src/assets/styles/styles.css
+++ b/platform/ui/src/assets/styles/styles.css
@@ -1,6 +1,11 @@
 /* CUSTOM OHIF SCROLLBAR */
 .ohif-scrollbar {
   scrollbar-color: #3E5967 transparent;
+  scrollbar-gutter: stable;
+}
+
+.ohif-scrollbar:hover {
+  overflow-y: auto;
 }
 
 .ohif-scrollbar::-webkit-scrollbar {
diff --git a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
index 37baf832a..ff74b9be7 100644
--- a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
+++ b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
@@ -15,7 +15,7 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
         </span>
         <span className="text-base font-bold text-white">{amount}</span>
       </div>
-      <div className="overflow-x-hidden overflow-y-auto ohif-scrollbar max-h-112">
+      <div className="overflow-hidden ohif-scrollbar max-h-112">
         {data.length !== 0 &&
           data.map((measurementItem, index) => (
             <MeasurementItem
diff --git a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx
index a7825aa5a..32c100715 100644
--- a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx
+++ b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx
@@ -105,7 +105,7 @@ const StudyBrowser = ({
           })}
         </ButtonGroup>
       </div>
-      <div className="flex flex-col flex-1 overflow-auto invisible-scrollbar">
+      <div className="flex flex-col flex-1 overflow-auto">
         {getTabContent()}
       </div>
     </React.Fragment>
diff --git a/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx b/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx
index 0c37b8d8f..eadc6a626 100644
--- a/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx
+++ b/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx
@@ -11,7 +11,7 @@ const ThumbnailList = ({
   onClickUntrack,
 }) => {
   return (
-    <div className="py-3 bg-black">
+    <div className="py-3 bg-black overflow-y-hidden ohif-scrollbar">
       {thumbnails.map(
         ({
           displaySetInstanceUID,