From f14e23cb8b45d2179e8e46774e28239606127bb5 Mon Sep 17 00:00:00 2001
From: Alireza <ar.sedghi@gmail.com>
Date: Mon, 6 Mar 2023 09:47:26 -0500
Subject: [PATCH] fix(ui): worklist had layout shift (#3218)

* fix(ui): worklist had layout shift

* apply review comments
---
 .../StudyListFilter/StudyListFilter.tsx       |  5 +-
 .../viewer/src/routes/WorkList/WorkList.tsx   | 70 +++++++++----------
 2 files changed, 35 insertions(+), 40 deletions(-)

diff --git a/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx b/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx
index 5ae39fcef..1e8008c80 100644
--- a/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx
+++ b/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx
@@ -66,10 +66,7 @@ const StudyListFilter = ({
           </div>
         </div>
       </div>
-      <div
-        className="sticky z-10 border-b-4 border-black"
-        style={{ top: '52px' }}
-      >
+      <div className="sticky z-10 border-b-4 border-black -top-1">
         <div className="pt-3 pb-3 bg-primary-dark ">
           <InputGroup
             inputMeta={filtersMeta}
diff --git a/platform/viewer/src/routes/WorkList/WorkList.tsx b/platform/viewer/src/routes/WorkList/WorkList.tsx
index 0026e4db2..2a6912d4b 100644
--- a/platform/viewer/src/routes/WorkList/WorkList.tsx
+++ b/platform/viewer/src/routes/WorkList/WorkList.tsx
@@ -430,48 +430,46 @@ function WorkList({
   }
 
   return (
-    <div
-      className={classnames('bg-black h-full', {
-        'h-screen': !hasStudies,
-      })}
-    >
+    <div className="bg-black h-screen flex flex-col ">
       <Header
         isSticky
         menuOptions={menuOptions}
         isReturnEnabled={false}
         WhiteLabeling={appConfig.whiteLabeling}
       />
-      <StudyListFilter
-        numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies}
-        filtersMeta={filtersMeta}
-        filterValues={{ ...filterValues, ...defaultSortValues }}
-        onChange={setFilterValues}
-        clearFilters={() => setFilterValues(defaultFilterValues)}
-        isFiltering={isFiltering(filterValues, defaultFilterValues)}
-      />
-      {hasStudies ? (
-        <>
-          <StudyListTable
-            tableDataSource={tableDataSource.slice(offset, offsetAndTake)}
-            numOfStudies={numOfStudies}
-            filtersMeta={filtersMeta}
-          />
-          <StudyListPagination
-            onChangePage={onPageNumberChange}
-            onChangePerPage={onResultsPerPageChange}
-            currentPage={pageNumber}
-            perPage={resultsPerPage}
-          />
-        </>
-      ) : (
-        <div className="flex flex-col items-center justify-center pt-48">
-          {appConfig.showLoadingIndicator && isLoadingData ? (
-            <LoadingIndicatorProgress className={'w-full h-full bg-black'} />
-          ) : (
-            <EmptyStudies />
-          )}
-        </div>
-      )}
+      <div className="overflow-y-auto ohif-scrollbar">
+        <StudyListFilter
+          numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies}
+          filtersMeta={filtersMeta}
+          filterValues={{ ...filterValues, ...defaultSortValues }}
+          onChange={setFilterValues}
+          clearFilters={() => setFilterValues(defaultFilterValues)}
+          isFiltering={isFiltering(filterValues, defaultFilterValues)}
+        />
+        {hasStudies ? (
+          <>
+            <StudyListTable
+              tableDataSource={tableDataSource.slice(offset, offsetAndTake)}
+              numOfStudies={numOfStudies}
+              filtersMeta={filtersMeta}
+            />
+            <StudyListPagination
+              onChangePage={onPageNumberChange}
+              onChangePerPage={onResultsPerPageChange}
+              currentPage={pageNumber}
+              perPage={resultsPerPage}
+            />
+          </>
+        ) : (
+          <div className="flex flex-col items-center justify-center pt-48">
+            {appConfig.showLoadingIndicator && isLoadingData ? (
+              <LoadingIndicatorProgress className={'w-full h-full bg-black'} />
+            ) : (
+              <EmptyStudies />
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 }