From 3a2483a73acb9ef4b3d209c958dbf8dc03f76346 Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matias.chomicki@grafana.com>
Date: Thu, 28 Aug 2025 20:24:47 +0200
Subject: [PATCH] Inline log details: adjust height on resize (#110310)

---
 .../features/logs/components/panel/LogLine.tsx | 18 +++++++++++++++++-
 .../logs/components/panel/LogLineDetails.tsx   | 11 ++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/public/app/features/logs/components/panel/LogLine.tsx b/public/app/features/logs/components/panel/LogLine.tsx
index 6ce1de66ba3..fc40b8b8939 100644
--- a/public/app/features/logs/components/panel/LogLine.tsx
+++ b/public/app/features/logs/components/panel/LogLine.tsx
@@ -156,6 +156,16 @@ const LogLineComponent = memo(
       [log, onClick]
     );
 
+    const handleLogDetailsResize = useCallback(() => {
+      if (!onOverflow || !logLineRef.current || !virtualization) {
+        return;
+      }
+      const actualHeight = hasUnderOrOverflow(virtualization, logLineRef.current, undefined, log.collapsed);
+      if (actualHeight) {
+        onOverflow(index, log.uid, actualHeight);
+      }
+    }, [index, log.collapsed, log.uid, onOverflow, virtualization]);
+
     const detailsShown = detailsDisplayed(log);
 
     return (
@@ -255,7 +265,13 @@ const LogLineComponent = memo(
           </div>
         )}
         {detailsMode === 'inline' && detailsShown && (
-          <InlineLogLineDetails logs={logs} log={log} timeRange={timeRange} timeZone={timeZone} />
+          <InlineLogLineDetails
+            logs={logs}
+            log={log}
+            onResize={handleLogDetailsResize}
+            timeRange={timeRange}
+            timeZone={timeZone}
+          />
         )}
       </>
     );
diff --git a/public/app/features/logs/components/panel/LogLineDetails.tsx b/public/app/features/logs/components/panel/LogLineDetails.tsx
index 1a3290a262c..3a3b1e16f79 100644
--- a/public/app/features/logs/components/panel/LogLineDetails.tsx
+++ b/public/app/features/logs/components/panel/LogLineDetails.tsx
@@ -141,11 +141,12 @@ LogLineDetailsTabs.displayName = 'LogLineDetailsTabs';
 export interface InlineLogLineDetailsProps {
   log: LogListModel;
   logs: LogListModel[];
+  onResize(): void;
   timeRange: TimeRange;
   timeZone: string;
 }
 
-export const InlineLogLineDetails = memo(({ logs, log, timeRange, timeZone }: InlineLogLineDetailsProps) => {
+export const InlineLogLineDetails = memo(({ logs, log, onResize, timeRange, timeZone }: InlineLogLineDetailsProps) => {
   const { app, detailsWidth, noInteractions } = useLogListContext();
   const styles = useStyles2(getStyles, 'inline');
   const scrollRef = useRef<HTMLDivElement | null>(null);
@@ -159,6 +160,14 @@ export const InlineLogLineDetails = memo(({ logs, log, timeRange, timeZone }: In
     }
   }, [app, noInteractions]);
 
+  useEffect(() => {
+    function handleResize() {
+      onResize();
+    }
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [onResize]);
+
   const saveScroll = useCallback(() => {
     saveDetailsScrollPosition(log, scrollRef.current?.scrollTop ?? 0);
   }, [log]);