From 4c5005e5759d03f2dfc24c69629fc7447cca4d80 Mon Sep 17 00:00:00 2001
From: Andrej Ocenas <mr.ocenas@gmail.com>
Date: Thu, 26 Mar 2020 13:24:58 +0100
Subject: [PATCH] Explore: Fix 100% height of graph and table panel (#23101)

* Fix 100% height styles

* Move utility class to component styles
---
 public/app/features/explore/Explore.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 2b5bdf42a10..17a7a108cb1 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -66,6 +66,7 @@ const getStyles = stylesFactory(() => {
       label: logsMain;
       // Is needed for some transition animations to work.
       position: relative;
+      margin-top: 21px;
     `,
     button: css`
       margin: 1em 4px 0 0;
@@ -347,7 +348,15 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                 }
 
                 return (
-                  <main className={cx('m-t-2', styles.logsMain, styles.fullHeight)} style={{ width }}>
+                  <main
+                    className={cx(
+                      styles.logsMain,
+                      // We need height to be 100% for tracing iframe to look good but in case of metrics mode
+                      // it makes graph and table also full page high when they do not need to be.
+                      mode === ExploreMode.Tracing && styles.fullHeight
+                    )}
+                    style={{ width }}
+                  >
                     <ErrorBoundaryAlert>
                       {showStartPage && StartPage && (
                         <div className={'grafana-info-box grafana-info-box--max-lg'}>