From be68bb6b3bcc0e04403c05f720dc0f460301a572 Mon Sep 17 00:00:00 2001
From: Sven Grossmann <Svennergr@gmail.com>
Date: Mon, 10 Oct 2022 14:17:22 +0200
Subject: [PATCH] LogContext: Fix wrong position of logcontext (#56613)

* fix styling issues

* remove unused class
---
 .../features/logs/components/LogRowContext.tsx    | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/public/app/features/logs/components/LogRowContext.tsx b/public/app/features/logs/components/LogRowContext.tsx
index 4ef5d9759de..696c08af6b4 100644
--- a/public/app/features/logs/components/LogRowContext.tsx
+++ b/public/app/features/logs/components/LogRowContext.tsx
@@ -53,10 +53,6 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
         width: 75%;
       `;
   return {
-    sizes: css`
-      width: calc(100% + ${theme.spacing()});
-      left: -${theme.spacing()};
-    `,
     commonStyles: css`
       position: absolute;
       height: ${contextHeight}px;
@@ -82,7 +78,8 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
     `,
     title: css`
       position: absolute;
-      top: -${contextHeight + headerHeight}px;
+      width: 75%;
+      margin-top: -${contextHeight + headerHeight}px;
       z-index: ${theme.zIndex.modal};
       height: ${headerHeight}px;
       background: ${theme.colors.background.secondary};
@@ -192,7 +189,7 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
   groupPosition,
   logsSortOrder,
 }) => {
-  const { commonStyles, logs, sizes } = useStyles2(getLogRowContextStyles);
+  const { commonStyles, logs } = useStyles2(getLogRowContextStyles);
   const [scrollTop, setScrollTop] = useState(0);
   const [scrollHeight, setScrollHeight] = useState(0);
 
@@ -247,7 +244,7 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
   };
 
   return (
-    <div className={cx(commonStyles, sizes, className)}>
+    <div className={cx(commonStyles, className)}>
       {/* When displaying "after" context */}
       {shouldScrollToBottom && !error && <LogRowContextGroupHeader {...headerProps} />}
       <div className={logs}>
@@ -300,7 +297,7 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
       document.removeEventListener('keydown', handleEscKeyDown, false);
     };
   }, [onOutsideClick]);
-  const { afterContext, beforeContext, title, top, actions, sizes } = useStyles2((theme) =>
+  const { afterContext, beforeContext, title, top, actions } = useStyles2((theme) =>
     getLogRowContextStyles(theme, wrapLogMessage)
   );
 
@@ -335,7 +332,7 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
             logsSortOrder={logsSortOrder}
           />
         )}
-        <div className={cx(title, sizes)}>
+        <div className={title}>
           <h5>Log context</h5>
           <div className={actions}>
             <IconButton size="lg" name="times" onClick={onOutsideClick} />