fix: explorer table expanding beyond page bounds (#485)

* fix: explorer table expanding beyond page bounds

* fix: change oveflow to hidden for clarity

* fix: safari squishing

Author: jake-bassett

projects/components/src/paginator/paginator.component.scss

@@ -8,7 +8,7 @@
   align-items: center;
 
   height: $paginator-height;
-  padding-top: 6px;
+  padding: 6px 0;
   border-top: 1px solid $color-border;
 
   .label {

projects/components/src/panel/panel.component.scss

@@ -10,7 +10,7 @@
     border-radius: 2px;
 
     &.expanded {
-      margin-bottom: 8px;
+      padding-bottom: 8px;
     }
 
     .header-content {

projects/components/src/table/table.component.scss

@@ -2,11 +2,7 @@
 @import 'layout';
 
 .table {
-  display: flex;
-  flex-direction: column;
   height: 100%;
-  width: 100%;
-  position: relative;
 }
 
 .title-row {

projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss

@@ -5,8 +5,8 @@
 }
 
 .table {
-  flex: 1 1;
-  width: 100%;
+  flex: 1;
+  min-height: 0;
 }
 
 .header-margin {

projects/observability/src/pages/explorer/explorer.component.scss

@@ -1,21 +1,40 @@
 @import 'font';
 
-.explorer-container {
+.explorer {
   display: flex;
   flex-direction: column;
-  padding: 24px 24px 0;
-  height: calc(100% - 40px);
+  overflow: hidden;
+  height: 100%;
 
-  .filter-bar {
-    margin-top: 16px;
+  .explorer-header {
+    flex: 0;
+  }
+
+  .explorer-content {
+    display: flex;
+    flex-direction: column;
+    padding: 24px 24px 0;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .explorer-data-toggle {
+    flex: 0;
+    padding-bottom: 16px;
+  }
+
+  .explorer-filter-bar {
+    flex: 0;
+    padding-bottom: 8px;
   }
 
   .panel-title {
     color: black;
   }
 
   .visualization-panel {
-    padding-top: 8px;
+    flex: 0;
+
     .label {
       @include body-1-medium;
     }
@@ -29,14 +48,15 @@
   }
 
   .results-panel {
+    flex: 1;
     overflow: hidden;
-    flex: 1 1 auto;
+
     .label {
       @include body-1-medium;
     }
 
     .results-panel-content {
-      margin-top: 12px;
+      padding-top: 12px;
     }
   }
 }

projects/observability/src/pages/explorer/explorer.component.ts

@@ -19,17 +19,18 @@ import {
   styleUrls: ['./explorer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="vertical-flex-layout">
-      <ht-page-header></ht-page-header>
-      <div class="fill-container explorer-container">
+    <div class="explorer">
+      <ht-page-header class="explorer-header"></ht-page-header>
+      <div class="explorer-content">
         <ht-toggle-group
+          class="explorer-data-toggle"
           [items]="this.contextItems"
           [activeItem]="this.activeContextItem$ | async"
           (activeItemChange)="this.onContextUpdated($event.value)"
         ></ht-toggle-group>
 
         <ht-filter-bar
-          class="filter-bar"
+          class="explorer-filter-bar"
           [attributes]="this.attributes$ | async"
           [syncWithUrl]="true"
           (filtersChange)="this.onFiltersUpdated($event)"