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/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 5b8e5dd89..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,8 +5,8 @@ } .table { - flex: 1 1; - width: 100%; + flex: 1; + min-height: 0; } .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: ` -