From bcadc90b4b905e8142a7fd25bda92f1fcd1231a0 Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Thu, 7 Jan 2021 14:01:14 -0800
Subject: [PATCH 1/3] fix: explorer table expanding beyond page bounds

---
 .../src/paginator/paginator.component.scss    |  2 +-
 .../components/src/panel/panel.component.scss |  2 +-
 .../table-widget-renderer.component.scss      |  1 +
 .../pages/explorer/explorer.component.scss    | 36 ++++++++++++++-----
 .../src/pages/explorer/explorer.component.ts  |  9 ++---
 5 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/projects/components/src/paginator/paginator.component.scss b/projects/components/src/paginator/paginator.component.scss
index f13397990..dcc3c4286 100644
--- a/projects/components/src/paginator/paginator.component.scss
+++ b/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 {
diff --git a/projects/components/src/panel/panel.component.scss b/projects/components/src/panel/panel.component.scss
index 9b6e0ce29..488ff4169 100644
--- a/projects/components/src/panel/panel.component.scss
+++ b/projects/components/src/panel/panel.component.scss
@@ -10,7 +10,7 @@
     border-radius: 2px;
 
     &.expanded {
-      margin-bottom: 8px;
+      padding-bottom: 8px;
     }
 
     .header-content {
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss
index 5b8e5dd89..d6343afe3 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss
@@ -7,6 +7,7 @@
 .table {
   flex: 1 1;
   width: 100%;
+  overflow: auto;
 }
 
 .header-margin {
diff --git a/projects/observability/src/pages/explorer/explorer.component.scss b/projects/observability/src/pages/explorer/explorer.component.scss
index a23993e8b..1b05a8a98 100644
--- a/projects/observability/src/pages/explorer/explorer.component.scss
+++ b/projects/observability/src/pages/explorer/explorer.component.scss
@@ -1,13 +1,31 @@
 @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 {
@@ -15,7 +33,8 @@
   }
 
   .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;
     }
   }
 }
diff --git a/projects/observability/src/pages/explorer/explorer.component.ts b/projects/observability/src/pages/explorer/explorer.component.ts
index 6698f4039..754ab03a0 100644
--- a/projects/observability/src/pages/explorer/explorer.component.ts
+++ b/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)"

From e463a6a320bbadaac666acc0172bbb86ce52f1da Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Thu, 7 Jan 2021 14:25:01 -0800
Subject: [PATCH 2/3] fix: change oveflow to hidden for clarity

---
 .../widgets/table/table-widget-renderer.component.scss          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss
index d6343afe3..78f55a187 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss
@@ -7,7 +7,7 @@
 .table {
   flex: 1 1;
   width: 100%;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .header-margin {

From e8e6c594cc923481ac7f0ac8fe7ba2515dce455b Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Thu, 7 Jan 2021 15:28:06 -0800
Subject: [PATCH 3/3] fix: safari squishing

---
 projects/components/src/table/table.component.scss           | 4 ----
 .../widgets/table/table-widget-renderer.component.scss       | 5 ++---
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/projects/components/src/table/table.component.scss b/projects/components/src/table/table.component.scss
index 3b710b4ec..565fd3232 100644
--- a/projects/components/src/table/table.component.scss
+++ b/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 {
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss
index 78f55a187..59a6119c2 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.scss
@@ -5,9 +5,8 @@
 }
 
 .table {
-  flex: 1 1;
-  width: 100%;
-  overflow: hidden;
+  flex: 1;
+  min-height: 0;
 }
 
 .header-margin {