From 07d960ac26b7000a071ad92008d078da3a4ed8ce Mon Sep 17 00:00:00 2001
From: Sven Grossmann <sven.grossmann@grafana.com>
Date: Wed, 29 Mar 2023 15:55:28 +0200
Subject: [PATCH] Logs: Position LogRowMenu sticky to be able to use it in
 scrollable containers (#65502)

* fix logrowmenu

* remove comment

* add comment

* get rid of absolute positions

* remove `inExplore` check
---
 .../features/logs/components/LogRowMessage.tsx | 10 +---------
 .../logs/components/getLogRowStyles.ts         | 18 ++++++++----------
 2 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/public/app/features/logs/components/LogRowMessage.tsx b/public/app/features/logs/components/LogRowMessage.tsx
index 1671f30a066..e8108f815a4 100644
--- a/public/app/features/logs/components/LogRowMessage.tsx
+++ b/public/app/features/logs/components/LogRowMessage.tsx
@@ -109,7 +109,6 @@ export class LogRowMessage extends PureComponent<Props> {
       wrapLogMessage,
       prettifyLogMessage,
       onToggleContext,
-      app,
       logsSortOrder,
       showContextToggle,
       getLogRowContextUi,
@@ -118,7 +117,6 @@ export class LogRowMessage extends PureComponent<Props> {
     const { hasAnsi, raw } = row;
     const restructuredEntry = restructureLog(raw, prettifyLogMessage);
     const shouldShowContextToggle = showContextToggle ? showContextToggle(row) : false;
-    const inExplore = app === CoreApp.Explore;
 
     return (
       <>
@@ -161,13 +159,7 @@ export class LogRowMessage extends PureComponent<Props> {
           </div>
         </td>
         {showRowMenu && (
-          <td
-            className={cx('log-row-menu-cell', styles.logRowMenuCell, {
-              [styles.logRowMenuCellDefaultPosition]: !inExplore,
-              [styles.logRowMenuCellExplore]: inExplore && !shouldShowContextToggle,
-              [styles.logRowMenuCellExploreWithContextButton]: inExplore && shouldShowContextToggle,
-            })}
-          >
+          <td className={cx('log-row-menu-cell', styles.logRowMenuCell)}>
             <span
               className={cx('log-row-menu', styles.rowMenu, {
                 [styles.rowMenuWithContextButton]: shouldShowContextToggle,
diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts
index a986ae270fc..2f383218cf4 100644
--- a/public/app/features/logs/components/getLogRowStyles.ts
+++ b/public/app/features/logs/components/getLogRowStyles.ts
@@ -70,6 +70,7 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
       font-family: ${theme.typography.fontFamilyMonospace};
       font-size: ${theme.typography.bodySmall.fontSize};
       width: 100%;
+      margin-bottom: ${theme.spacing(2.25)}; /* This is to make sure the last row's LogRowMenu is not cut off. */
     `,
     contextBackground: css`
       background: ${hoverBgColor};
@@ -241,17 +242,14 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
       width: ${theme.spacing(10)};
     `,
     logRowMenuCell: css`
-      position: absolute;
+      position: sticky;
+      z-index: ${theme.zIndex.dropdown};
       margin-top: -${theme.spacing(0.125)};
-    `,
-    logRowMenuCellDefaultPosition: css`
-      right: 40px;
-    `,
-    logRowMenuCellExplore: css`
-      right: calc(115px + ${theme.spacing(1)});
-    `,
-    logRowMenuCellExploreWithContextButton: css`
-      right: calc(155px + ${theme.spacing(1)});
+      right: 0px;
+
+      & > span {
+        transform: translateX(-100%);
+      }
     `,
     logLine: css`
       background-color: transparent;