From 01c4783c0b550cbe9fbf10293350cba1d61b97e4 Mon Sep 17 00:00:00 2001
From: Sven Grossmann <sven.grossmann@grafana.com>
Date: Thu, 22 Dec 2022 14:43:02 +0100
Subject: [PATCH] Logs: Fix height of logs component when used with topnav
 (#60669)

fix height for topNav
---
 public/app/features/explore/LogsNavigation.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/app/features/explore/LogsNavigation.tsx b/public/app/features/explore/LogsNavigation.tsx
index 5d495660161..97e53893396 100644
--- a/public/app/features/explore/LogsNavigation.tsx
+++ b/public/app/features/explore/LogsNavigation.tsx
@@ -1,10 +1,11 @@
 import { css } from '@emotion/css';
 import { isEqual } from 'lodash';
-import React, { memo, useState, useEffect, useRef } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 
-import { LogsSortOrder, AbsoluteTimeRange, TimeZone, DataQuery, GrafanaTheme2 } from '@grafana/data';
+import { AbsoluteTimeRange, DataQuery, GrafanaTheme2, LogsSortOrder, TimeZone } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
 import { Button, Icon, Spinner, useTheme2 } from '@grafana/ui';
+import { TOP_BAR_LEVEL_HEIGHT } from 'app/core/components/AppChrome/types';
 
 import { LogsNavigationPages } from './LogsNavigationPages';
 
@@ -188,9 +189,12 @@ function LogsNavigation({
 export default memo(LogsNavigation);
 
 const getStyles = (theme: GrafanaTheme2, oldestLogsFirst: boolean, loading: boolean) => {
+  const navContainerHeight = theme.flags.topnav
+    ? `calc(100vh - 2*${theme.spacing(2)} - 2*${TOP_BAR_LEVEL_HEIGHT}px)`
+    : '95vh';
   return {
     navContainer: css`
-      max-height: 95vh;
+      max-height: ${navContainerHeight};
       display: flex;
       flex-direction: column;
       justify-content: ${oldestLogsFirst ? 'flex-start' : 'space-between'};