From 38863844e7ac72c7756038a1097f89632f9985ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 9 Jun 2023 14:22:35 +0200
Subject: [PATCH] LogsPanel: Remove top margin (#69847)

* LogsPanel: Remove top margin

* Fixing
---
 public/app/plugins/panel/logs/LogsPanel.tsx | 39 +++++++++++----------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/public/app/plugins/panel/logs/LogsPanel.tsx b/public/app/plugins/panel/logs/LogsPanel.tsx
index 3aff98323e9..85ab80ae0b5 100644
--- a/public/app/plugins/panel/logs/LogsPanel.tsx
+++ b/public/app/plugins/panel/logs/LogsPanel.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React, { useCallback, useMemo, useRef, useLayoutEffect, useState } from 'react';
 
 import {
@@ -42,7 +42,7 @@ export const LogsPanel = ({
   id,
 }: LogsPanelProps) => {
   const isAscending = sortOrder === LogsSortOrder.Ascending;
-  const style = useStyles2(getStyles(title, isAscending));
+  const style = useStyles2(getStyles);
   const [scrollTop, setScrollTop] = useState(0);
   const logsContainerRef = useRef<HTMLDivElement>(null);
 
@@ -95,7 +95,7 @@ export const LogsPanel = ({
   }
 
   const renderCommonLabels = () => (
-    <div className={style.labelContainer}>
+    <div className={cx(style.labelContainer, isAscending && style.labelContainerAscending)}>
       <span className={style.label}>Common labels:</span>
       <LogLabels labels={commonLabels ? (commonLabels.value as Labels) : { labels: '(no common labels)' }} />
     </div>
@@ -127,20 +127,21 @@ export const LogsPanel = ({
   );
 };
 
-const getStyles = (title: string, isAscending: boolean) => (theme: GrafanaTheme2) => ({
-  container: css`
-    margin-bottom: ${theme.spacing(1.5)};
-    //We can remove this hot-fix when we fix panel menu with no title overflowing top of all panels
-    margin-top: ${theme.spacing(!title ? 2.5 : 0)};
-  `,
-  labelContainer: css`
-    margin: ${isAscending ? theme.spacing(0.5, 0, 0.5, 0) : theme.spacing(0, 0, 0.5, 0.5)};
-    display: flex;
-    align-items: center;
-  `,
-  label: css`
-    margin-right: ${theme.spacing(0.5)};
-    font-size: ${theme.typography.bodySmall.fontSize};
-    font-weight: ${theme.typography.fontWeightMedium};
-  `,
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    marginBottom: theme.spacing(1.5),
+  }),
+  labelContainer: css({
+    margin: theme.spacing(0, 0, 0.5, 0.5),
+    display: 'flex',
+    alignItems: 'center',
+  }),
+  labelContainerAscending: css({
+    margin: theme.spacing(0.5, 0, 0.5, 0),
+  }),
+  label: css({
+    marginRight: theme.spacing(0.5),
+    fontSize: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+  }),
 });