From cc56e0e75c9e3e737445d2ba1c4212558faebdb7 Mon Sep 17 00:00:00 2001
From: Sven Grossmann <sven.grossmann@grafana.com>
Date: Tue, 30 Jan 2024 13:11:12 +0100
Subject: [PATCH] Logs Panel: Fix scrolling with permalinks (#81558)

---
 public/app/plugins/panel/logs/LogsPanel.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/panel/logs/LogsPanel.tsx b/public/app/plugins/panel/logs/LogsPanel.tsx
index a06cf59ec9e..ea889ece729 100644
--- a/public/app/plugins/panel/logs/LogsPanel.tsx
+++ b/public/app/plugins/panel/logs/LogsPanel.tsx
@@ -63,6 +63,7 @@ export const LogsPanel = ({
   const [closeCallback, setCloseCallback] = useState<(() => void) | null>(null);
   const timeRange = data.timeRange;
   const dataSourcesMap = useDatasourcesFromTargets(data.request?.targets);
+  const [scrollElement, setScrollElement] = useState<HTMLDivElement | null>(null);
 
   const { eventBus } = usePanelContext();
   const onLogRowHover = useCallback(
@@ -178,9 +179,15 @@ export const LogsPanel = ({
   /**
    * Scrolls the given row into view.
    */
-  const scrollIntoView = useCallback((row: HTMLElement) => {
-    row.scrollIntoView(true);
-  }, []);
+  const scrollIntoView = useCallback(
+    (row: HTMLElement) => {
+      scrollElement?.scrollTo({
+        top: row.offsetTop,
+        behavior: 'smooth',
+      });
+    },
+    [scrollElement]
+  );
 
   if (!data || logRows.length === 0) {
     return <PanelDataErrorView fieldConfig={fieldConfig} panelId={id} data={data} needsStringField />;
@@ -205,7 +212,11 @@ export const LogsPanel = ({
           timeZone={timeZone}
         />
       )}
-      <CustomScrollbar autoHide scrollTop={scrollTop}>
+      <CustomScrollbar
+        autoHide
+        scrollTop={scrollTop}
+        scrollRefCallback={(scrollElement) => setScrollElement(scrollElement)}
+      >
         <div className={style.container} ref={logsContainerRef}>
           {showCommonLabels && !isAscending && renderCommonLabels()}
           <LogRows