From 1d5f90b720f7ba5d0116872e43b57eb2758047bf Mon Sep 17 00:00:00 2001
From: Sven Grossmann <sven.grossmann@grafana.com>
Date: Tue, 6 Jun 2023 11:22:32 +0200
Subject: [PATCH] [v10.0.x] Log Row: Fix menu styling and dimensions (#69569)
 (#69585)

Log Row: Fix menu styling and dimensions (#69569)

* fix wrong logrowmenu styling

* fix imports

(cherry picked from commit 9d2f4786c79e0c00469553b201d78f8a9e257a62)
---
 .../features/logs/components/LogRowMessage.tsx  | 17 ++++++++---------
 .../features/logs/components/getLogRowStyles.ts |  8 ++------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/public/app/features/logs/components/LogRowMessage.tsx b/public/app/features/logs/components/LogRowMessage.tsx
index c32f651bcae..66355e5c4c2 100644
--- a/public/app/features/logs/components/LogRowMessage.tsx
+++ b/public/app/features/logs/components/LogRowMessage.tsx
@@ -90,16 +90,15 @@ export class LogRowMessage extends PureComponent<Props> {
           </div>
         </td>
         <td className={cx('log-row-menu-cell', styles.logRowMenuCell)}>
-          <span
-            className={cx('log-row-menu', styles.rowMenu, {
-              [styles.rowMenuWithContextButton]: shouldShowContextToggle,
-            })}
-            onClick={(e) => e.stopPropagation()}
-          >
+          <span className={cx('log-row-menu', styles.rowMenu)} onClick={(e) => e.stopPropagation()}>
             {shouldShowContextToggle && (
-              <Tooltip placement="top" content={'Show context'}>
-                <IconButton size="md" name="gf-show-context" onClick={this.onShowContextClick} />
-              </Tooltip>
+              <IconButton
+                tooltip="Show context"
+                tooltipPlacement="top"
+                size="md"
+                name="gf-show-context"
+                onClick={this.onShowContextClick}
+              />
             )}
             <Tooltip placement="top" content={'Copy'}>
               <IconButton size="md" name="copy" onClick={() => navigator.clipboard.writeText(restructuredEntry)} />
diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts
index 18869f02a43..0cee5f0d7ef 100644
--- a/public/app/features/logs/components/getLogRowStyles.ts
+++ b/public/app/features/logs/components/getLogRowStyles.ts
@@ -230,16 +230,12 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
       position: absolute;
       top: 0;
       bottom: auto;
-      height: ${theme.spacing(4.5)};
       background: ${theme.colors.background.primary};
       box-shadow: ${theme.shadows.z3};
-      padding: ${theme.spacing(0, 0, 0, 0.5)};
+      padding: ${theme.spacing(0.5, 0.5, 0.5, 1)};
       z-index: 100;
       visibility: hidden;
-      width: ${theme.spacing(5)};
-    `,
-    rowMenuWithContextButton: css`
-      width: ${theme.spacing(10)};
+      gap: ${theme.spacing(0.5)};
     `,
     logRowMenuCell: css`
       position: sticky;