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(
)}
{detailsMode === 'inline' && detailsShown && (
-
+
)}
>
);
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(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]);