Fix display of health drop downs in tiny tables of one entry

- Drop down was deemed to exceed bounds to switch to show above row
- Drop down was clipped due to sortable-table being overflow:hidden
- So allow overflow to be overriden
- Also ensure there's no funnies for the bottom element at the bottom of the window

components/ResourceTable.vue

@@ -63,6 +63,15 @@ export default {
       type:    String,
       default: 'resourceTable.groupBy.namespace',
     },
+
+    overflowX: {
+      type:    Boolean,
+      default: false
+    },
+    overflowY: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   computed: {
@@ -263,6 +272,8 @@ export default {
     :paging-params="pagingParams"
     :paging-label="pagingLabel"
     :table-actions="_showBulkActions"
+    :overflow-x="overflowX"
+    :overflow-y="overflowY"
     key-field="_key"
     :sort-generation-fn="sortGenerationFn"
     v-on="$listeners"

components/SortableTable/index.vue

@@ -173,6 +173,15 @@ export default {
       default: false
     },
 
+    overflowX: {
+      type:    Boolean,
+      default: false
+    },
+    overflowY: {
+      type:    Boolean,
+      default: false
+    },
+
     /**
      * If pagination of the data is enabled or not
      */
@@ -391,7 +400,9 @@ export default {
     classObject() {
       return {
         'top-divider':     this.topDivider,
-        'body-dividers':   this.bodyDividers
+        'body-dividers':   this.bodyDividers,
+        'overflow-y':      this.overflowY,
+        'overflow-x':      this.overflowX,
       };
     }
   },
@@ -833,6 +844,13 @@ $spacing: 10px;
   background: var(--sortable-table-bg);
   border-radius: 4px;
 
+  &.overflow-x {
+    overflow-x: visible;
+  }
+  &.overflow-y {
+    overflow-y: visible;
+  }
+
   td {
     padding: 8px 5px;
     border: 0;

components/formatter/WorkloadHealthScale.vue

@@ -101,11 +101,16 @@ export default {
 
   watch: {
     expanded(neu) {
+      // If the drop down content appears outside of the window then move it to be above the trigger
+      // Do this is three steps
+      // expanded: false & expanded-checked = false - Content does not appear in DOM
+      // expanded: true & expanded-checked = false - Content appears in DOM (so it's location can be calcualated to be in or out of an area) but isn't visible (user doesn't see content blip from below to above trigger)
+      // expanded: true & expanded-checked = true - Content appears in DOM and is visible (it's final location is known so user can see)
       setTimeout(() => { // There be beasts without this (classes don't get applied... so drop down never gets shown)
         const dropdown = document.getElementById(this.id);
 
         if (!neu) {
-          dropdown.classList.remove('viewported');
+          dropdown.classList.remove('expanded-checked');
 
           return;
         }
@@ -119,18 +124,14 @@ export default {
           bottom:  window.innerHeight || document.documentElement.clientHeight,
         });
 
-        // Ensure drop down will be inside the table, otherwise the table will overflow:hidden it
-        const table = document.getElementsByClassName('sortable-table')[0];
-        const insideTable = this.insideBounds(bounding, table.getBoundingClientRect());
-
-        if (insideWindow && insideTable) {
-          dropdown.classList.remove('out-of-view-port');
+        if (insideWindow) {
+          dropdown.classList.remove('out-of-view');
         } else {
-          dropdown.classList.add('out-of-view-port');
+          dropdown.classList.add('out-of-view');
         }
 
         // This will trigger the actual display of the drop down (after we've calculated if it goes below or above trigger)
-        dropdown.classList.add('viewported');
+        dropdown.classList.add('expanded-checked');
       });
     }
   }
@@ -158,7 +159,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 $height: 30px;
 $width: 150px;
@@ -198,7 +199,7 @@ $width: 150px;
   }
 
   &__content {
-    z-index: 20;
+    z-index: 14;
     width: $width;
 
     border: solid thin var(--sortable-table-top-divider);
@@ -207,15 +208,19 @@ $width: 150px;
     position: absolute;
     margin-top: -1px;
 
+    display: none;
     visibility: hidden;
-    &.viewported {
+    &.expanded {
+      display: inline;
+    }
+    &.expanded-checked {
       visibility: visible;
     }
 
-    &.out-of-view-port {
+    &.out-of-view {
       // Flip to show drop down above trigger
       bottom: 0;
-      margin-bottom: $height;
+      margin-bottom: $height - 1px;
     }
 
     & > div {

list/workload.vue

@@ -128,5 +128,5 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <ResourceTable v-else :schema="schema" :rows="rows" />
+  <ResourceTable v-else :schema="schema" :rows="rows" :overflow-y="true" />
 </template>