Added fix to resize filter panel

addon/components/hyper-table-v2/column.hbs

@@ -31,7 +31,11 @@
       {{/if}}
 
       {{#if (and this.filteringComponent (eq @handler.tetherOn @column.definition.key))}}
-        <div class="available-filters" {{on-click-outside this.toggleFilteringComponent}}>
+        <div
+          class="available-filters"
+          {{on-click-outside this.toggleFilteringComponent}}
+          {{did-insert this.setDropdownHeight}}
+        >
           <this.filteringComponent.component
             @handler={{@handler}}
             @column={{@column}}

addon/components/hyper-table-v2/column.ts

@@ -18,6 +18,9 @@ export default class HyperTableV2Column extends Component<HyperTableV2ColumnArgs
   @tracked headerComponent?: ResolvedRenderingComponent;
   @tracked filteringComponent?: ResolvedRenderingComponent;
   @tracked displayFilteringComponent: boolean = false;
+  @tracked dropdownHeight: string = '300px';
+
+  private resizeHandler?: () => void;
 
   displayMoveIndicator: boolean;
 
@@ -49,7 +52,7 @@ export default class HyperTableV2Column extends Component<HyperTableV2ColumnArgs
     this.elementId = guidFor(args.column.definition.key);
   }
 
-  @computed('args.column.filters.[]', 'args.column.order')
+  @computed('args.column.filters.[]', 'args.column.order.direction', 'sizeClass')
   get computedClasses(): string {
     const classes = ['hypertable__column'];
 
@@ -76,6 +79,28 @@ export default class HyperTableV2Column extends Component<HyperTableV2ColumnArgs
     return `hypertable__column--size-${size}`;
   }
 
+  @action
+  setDropdownHeight(): void {
+    const dropdown = document.querySelector(`#${this.elementId} .available-filters`) as HTMLElement;
+    const colHeader = document.querySelector(`#${this.elementId} .tether-target`) as HTMLElement;
+    const table = document.querySelector('.hypertable') as HTMLElement;
+
+    if (!dropdown || !colHeader || !table) return;
+
+    const colHeaderTop = colHeader.getBoundingClientRect().top;
+    const tableBottom = table.getBoundingClientRect().bottom;
+
+    const availableHeight = tableBottom - colHeaderTop - 100;
+
+    dropdown.style.height = `${availableHeight}px`;
+    dropdown.style.overflowY = 'auto';
+
+    if (!this.resizeHandler) {
+      this.resizeHandler = () => this.setDropdownHeight();
+      window.addEventListener('resize', this.resizeHandler);
+    }
+  }
+
   @action
   orderColumn(e: MouseEvent): void {
     e.stopPropagation();
@@ -102,8 +127,12 @@ export default class HyperTableV2Column extends Component<HyperTableV2ColumnArgs
   }
 
   willDestroy() {
+    super.willDestroy();
     if (this.args.handler.tetherOn !== this.args.column.definition.key) {
       this.args.handler.destroyTetherInstance();
     }
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+    }
   }
 }