fix sticky elements

platform/ui/src/views/StudyList/StudyList.js

@@ -69,13 +69,8 @@ const StudyList = ({ studies, perPage }) => {
         'h-screen': isEmptyStudies,
       })}
     >
-      <div className="sticky top-0 z-10">
       <Header />
-        <StudyListFilter
+      <StudyListFilter numOfStudies={numOfStudies} filtersMeta={filtersMeta} />
-          numOfStudies={numOfStudies}
-          filtersMeta={filtersMeta}
-        />
-      </div>
       <StudyListTable
         studies={studiesData}
         numOfStudies={numOfStudies}

platform/ui/src/views/StudyList/components/Header.js

@@ -12,7 +12,7 @@ function Header({ appLogo = OHIFLogo(), children, t }) {
   };
 
   return (
-    <div className="bg-custom-navy flex flex-row justify-between px-3 py-1 text-white">
+    <div className="bg-custom-navy flex flex-row justify-between px-3 py-1 text-white sticky top-0 z-10">
       <div className="flex items-center">
         <div className="mx-3">{appLogo}</div>
         <div>{children}</div>

platform/ui/src/views/StudyList/components/StudyListFilter.js

@@ -124,12 +124,16 @@ const StudyListFilter = ({
   };
 
   return (
-    <div className="border-t-4 border-b-4 border-black">
+    <>
+      <div className="border-t-4 border-black">
         <div className="bg-custom-navyDark">
-        <div className="container m-auto relative flex flex-col pt-5 pb-3">
+          <div className="container m-auto relative flex flex-col pt-5">
             <div className="flex flex-row justify-between mb-5 px-12">
               <div className="flex flex-row">
-              <Typography variant="h4" className="text-custom-aquaBright mr-6">
+                <Typography
+                  variant="h4"
+                  className="text-custom-aquaBright mr-6"
+                >
                   Study List
                 </Typography>
                 <div className="flex flex-row items-end">
@@ -171,11 +175,18 @@ const StudyListFilter = ({
                 </Typography>
               </div>
             </div>
+          </div>
+        </div>
+      </div>
+      <div className="sticky z-10" style={{ top: 54 }}>
+        <div className="bg-custom-navyDark pt-3 pb-3 border-b-4 border-black">
+          <div className="container m-auto relative flex flex-col">
             <div className="flex flex-row w-full">
               {filtersMeta.map(
                 ({ name, displayName, inputType, isSortable, gridCol }) => {
                   return (
                     <div
+                      key={name}
                       className={classnames(
                         `w-${gridCol}/24`,
                         'pl-4 first:pl-12'
@@ -221,6 +232,7 @@ const StudyListFilter = ({
           </div>
         )}
       </div>
+    </>
   );
 };