Update layout and styles to fix VEP results table loading overlay (#1173

)
Ensembl · Oct 1, 2024 · 682742b · 682742b
1 parent 9280eca
commit 682742b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/content/app/tools/vep/views/vep-submission-results/VepSubmissionResults.module.css b/src/content/app/tools/vep/views/vep-submission-results/VepSubmissionResults.module.css
@@ -84,11 +84,21 @@
   a wrapper around the table of results,
   which allows positioning the loading overlay over the table
 */
-.tableWrapper {
+.tableViewportWrapper {
   position: relative;
+  height: 100%;
+  overflow: hidden;
+  margin-right: -1rem;
+}
+
+/*
+  a scrollable container for the table of results
+  (allows vertical and horizontal scrolling of the table)
+*/
+.tableViewport {
   overflow: auto;
   padding-right: 1rem;
-  margin-right: -1rem;
+  height: 100%;
 }
 
 .tableLoadingOverlay {

diff --git a/src/content/app/tools/vep/views/vep-submission-results/VepSubmissionResults.tsx b/src/content/app/tools/vep/views/vep-submission-results/VepSubmissionResults.tsx
@@ -139,13 +139,15 @@ const VepSubmissionResults = () => {
           perPage={perPage}
           onPerPageChange={setPerPage}
         />
-        <div className={styles.tableWrapper}>
+        <div className={styles.tableViewportWrapper}>
           {isFetching && (
             <div className={styles.tableLoadingOverlay}>
               <CircleLoader className={styles.tableLoadingSpinner} />
             </div>
           )}
-          <VepResultsTable variants={vepResults.variants} />
+          <div className={styles.tableViewport}>
+            <VepResultsTable variants={vepResults.variants} />
+          </div>
         </div>
       </div>
     </div>