Better scrolling for workflows list (#516)

Better scrolling for workflows list
cadence-workflow · Jul 26, 2023 · cce8d73 · cce8d73
1 parent 9957a67
commit cce8d73
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 20 deletions.
diff --git a/client/App.vue b/client/App.vue
@@ -453,15 +453,19 @@ header.top-bar
       font-weight: bold;
     }
   }
-
-body, main
-  height 100%
-main
-  position absolute
-  width 100%
-  display flex
-  flex-direction column
-
+html, body {
+  height: 100%;
+}
+body, main {
+  display: flex;
+  flex-direction: column;
+}
+body {
+  overscroll-behavior: none;
+}
+main {
+  flex:1
+}
 main
   > section
     display flex

diff --git a/client/components/workflow-grid.vue b/client/components/workflow-grid.vue
@@ -53,7 +53,7 @@ export default {
 </script>
 
 <template>
-  <section class="workflow-grid" :class="{ loading }">
+  <section class="workflow-grid-wrapper" :class="{ loading }">
     <div class="row-header">
       <div class="col col-id">Workflow ID</div>
       <div class="col col-link">Run ID</div>
@@ -107,9 +107,11 @@ export default {
 
 paged-grid();
 
-.workflow-grid {
-  height: calc(100vh - 203px);
-
+.workflow-grid-wrapper{
+  display: flex;
+  flex:1;
+  flex-direction: column;
+  min-width: 1000px;
   &.loading.has-results::after {
     content: none;
   }
@@ -193,4 +195,7 @@ paged-grid();
     }
   }
 }
+.workflow-grid {
+  flex:1 1 400px;
+}
 </style>
diff --git a/client/containers/workflow-list/component.vue b/client/containers/workflow-list/component.vue
@@ -629,8 +629,8 @@ export default {
 
 section.workflow-list
   display: flex;
-  flex: auto;
   flex-direction: column;
+  flex: 1;
 
   &.loading section.results table
     opacity 0.7

diff --git a/client/test/workflow-list.test.js b/client/test/workflow-list.test.js
@@ -57,7 +57,9 @@ describe('Workflow list', () => {
 
   it('should query for all workflows and show the results in a grid', async function test() {
     const [workflowsEl] = await workflowsTest(this.test);
-    const resultsEl = workflowsEl.querySelector('section.workflow-grid');
+    const resultsEl = workflowsEl.querySelector(
+      'section.workflow-grid-wrapper'
+    );
 
     workflowsEl
       .querySelector('[data-cy="status-filter"] .vs__selected')
@@ -208,7 +210,9 @@ describe('Workflow list', () => {
 
     await retry(() =>
       testEl
-        .querySelectorAll('section.workflow-list section.workflow-grid .row')
+        .querySelectorAll(
+          'section.workflow-list section.workflow-grid-wrapper .row'
+        )
         .should.have.length(1)
     );
     await Promise.delay(50);
@@ -243,7 +247,9 @@ describe('Workflow list', () => {
 
     await retry(() =>
       workflowsEl
-        .textNodes('section.workflow-list section.workflow-grid .row .col-id')
+        .textNodes(
+          'section.workflow-list section.workflow-grid-wrapper .row .col-id'
+        )
         .should.deep.equal(['demoWfId'])
     );
   });
@@ -267,7 +273,9 @@ describe('Workflow list', () => {
 
     await retry(() =>
       workflowsEl
-        .textNodes('section.workflow-list section.workflow-grid .row .col-id')
+        .textNodes(
+          'section.workflow-list section.workflow-grid-wrapper .row .col-id'
+        )
         .should.deep.equal(['demoWfId'])
     );
   });
@@ -311,7 +319,9 @@ describe('Workflow list', () => {
 
     await retry(() =>
       workflowsEl
-        .textNodes('section.workflow-list section.workflow-grid .row .col-name')
+        .textNodes(
+          'section.workflow-list section.workflow-grid-wrapper .row .col-name'
+        )
         .should.deep.equal(['demo'])
     );
   });
@@ -337,7 +347,7 @@ describe('Workflow list', () => {
     await retry(() => {
       workflowsEl.querySelector('div.no-results').should.be.displayed;
       workflowsEl
-        .querySelector('section.workflow-grid')
+        .querySelector('section.workflow-grid-wrapper')
         .should.not.contain('.results');
     });
   });