fix(UI): fixed results per page select menu (#3384)

OHIF · May 11, 2023 · cba57a1 · cba57a1
1 parent 656f9cf
commit cba57a1
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 25 deletions.
diff --git a/platform/ui/src/components/Select/Select.css b/platform/ui/src/components/Select/Select.css
@@ -52,45 +52,39 @@
   border-radius: 6px;
 }
 
-.css-4ljt47-MenuList {
+.ohif-select .customSelect__menu-list {
   overflow-x: hidden !important;
   margin-right: 4px;
   margin-top: 4px;
   padding-top: 0px !important;
 }
-.css-4ljt47-MenuList::-webkit-scrollbar {
+
+.ohif-select .customSelect__menu-list::-webkit-scrollbar {
   width: 6px;
   border-radius: 10px;
 }
 
-.css-4ljt47-MenuList::-webkit-scrollbar-thumb {
+.ohif-select .customSelect__menu-list::-webkit-scrollbar-thumb {
   background-color: #0944b3;
   border-radius: 10px;
 }
 
 .customSelect__option:focus {
   background-color: #0944b391 !important;
 }
-.customSelect__option label {
+
+.ohif-select .customSelect__option, .ohif-select .customSelect__option label {
   color: #d6d6d6;
   font-size: 14px;
   display: flex;
   align-items: center;
 }
 
-.css-1n7v3ny-option {
-  background-color: #0944b391 !important;
-}
-
-.css-1n7v3ny-option:focus {
-  background-color: #0944b391 !important;
-}
-
-.customSelect__option:hover {
+.ohif-select .customSelect__option:hover {
   background-color: #0944b391;
 }
 
-.css-26l3qy-menu {
+.ohif-select .customSelect__menu {
   border: 2px solid #0944b3;
   border-radius: 6px;
   background-color: #151515 !important;

diff --git a/platform/ui/src/components/Select/Select.tsx b/platform/ui/src/components/Select/Select.tsx
@@ -77,7 +77,7 @@ const Select = ({
       inputId={`input-${id}`}
       className={classnames(
         className,
-        'flex flex-col flex-1 customSelect__wrapper'
+        'ohif-select flex flex-col flex-1 customSelect__wrapper'
       )}
       data-cy={`input-${id}`}
       classNamePrefix="customSelect"

diff --git a/platform/ui/src/components/StudyListPagination/StudyListPagination.tsx b/platform/ui/src/components/StudyListPagination/StudyListPagination.tsx
@@ -36,7 +36,7 @@ const StudyListPagination = ({
           <div className="flex items-center">
             <Select
               id="rows-per-page"
-              className="relative mr-3 w-16 border-primary-main"
+              className="relative mr-3 w-24 border-primary-main"
               options={ranges}
               value={selectedRange}
               isMulti={false}

diff --git a/platform/viewer/src/routes/WorkList/WorkList.tsx b/platform/viewer/src/routes/WorkList/WorkList.tsx
@@ -466,7 +466,7 @@ function WorkList({
         isReturnEnabled={false}
         WhiteLabeling={appConfig.whiteLabeling}
       />
-      <div className="overflow-y-auto ohif-scrollbar">
+      <div className="overflow-y-auto ohif-scrollbar flex flex-col grow">
         <StudyListFilter
           numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies}
           filtersMeta={filtersMeta}
@@ -477,19 +477,21 @@ function WorkList({
           onUploadClick={uploadProps ? () => show(uploadProps) : undefined}
         />
         {hasStudies ? (
-          <>
+          <div className="grow flex flex-col">
             <StudyListTable
               tableDataSource={tableDataSource.slice(offset, offsetAndTake)}
               numOfStudies={numOfStudies}
               filtersMeta={filtersMeta}
             />
-            <StudyListPagination
-              onChangePage={onPageNumberChange}
-              onChangePerPage={onResultsPerPageChange}
-              currentPage={pageNumber}
-              perPage={resultsPerPage}
-            />
-          </>
+            <div className="grow">
+              <StudyListPagination
+                onChangePage={onPageNumberChange}
+                onChangePerPage={onResultsPerPageChange}
+                currentPage={pageNumber}
+                perPage={resultsPerPage}
+              />
+            </div>
+          </div>
         ) : (
           <div className="flex flex-col items-center justify-center pt-48">
             {appConfig.showLoadingIndicator && isLoadingData ? (