From 1a985c488ce108b48687f541277f53070e4330d9 Mon Sep 17 00:00:00 2001
From: Sven Grossmann <sven.grossmann@grafana.com>
Date: Mon, 19 Jun 2023 13:15:22 +0200
Subject: [PATCH] Logs: Fix scrolling with `exploreScrollableLogsContainer`
 feature flag (#70164)

correct scrolling with `exploreScrollableLogsContainer`
---
 public/app/features/explore/Logs/Logs.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/public/app/features/explore/Logs/Logs.tsx b/public/app/features/explore/Logs/Logs.tsx
index 2867ef4f522..a1e1c799a19 100644
--- a/public/app/features/explore/Logs/Logs.tsx
+++ b/public/app/features/explore/Logs/Logs.tsx
@@ -136,6 +136,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
   cancelFlippingTimer?: number;
   topLogsRef = createRef<HTMLDivElement>();
   logsVolumeEventBus: EventBus;
+  logsContainer = createRef<HTMLDivElement>();
 
   state: State = {
     showLabels: store.getBool(SETTINGS_KEYS.showLabels, false),
@@ -370,6 +371,17 @@ class UnthemedLogs extends PureComponent<Props, State> {
   };
 
   scrollIntoView = (element: HTMLElement) => {
+    if (config.featureToggles.exploreScrollableLogsContainer) {
+      this.scrollToTopLogs();
+      if (this.logsContainer.current) {
+        this.logsContainer.current.scroll({
+          behavior: 'smooth',
+          top: this.logsContainer.current.scrollTop + element.getBoundingClientRect().top - window.innerHeight / 2,
+        });
+      }
+
+      return;
+    }
     const { scrollElement } = this.props;
 
     if (scrollElement) {
@@ -582,7 +594,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
             clearDetectedFields={this.clearDetectedFields}
           />
           <div className={styles.logsSection}>
-            <div className={styles.logRows} data-testid="logRows">
+            <div className={styles.logRows} data-testid="logRows" ref={this.logsContainer}>
               <LogRows
                 logRows={logRows}
                 deduplicatedRows={dedupedRows}