fix(logs): adjust back-to-top containers to window width resize

Author: JoshuaKGoldberg

static/app/utils/useElementWidth.tsx

@@ -0,0 +1,17 @@
+import type {RefObject} from 'react';
+import {useLayoutEffect, useState} from 'react';
+
+import {useWindowSize} from 'sentry/utils/window/useWindowSize';
+
+export function useElementWidth<Element extends HTMLElement>(
+  elementRef: RefObject<Element | null>
+) {
+  const [width, setWidth] = useState(elementRef.current?.getBoundingClientRect().width);
+  const {innerWidth} = useWindowSize();
+
+  useLayoutEffect(() => {
+    setWidth(elementRef.current?.getBoundingClientRect().width);
+  }, [elementRef, innerWidth]);
+
+  return width;
+}

static/app/views/explore/logs/tables/logsInfiniteTable.tsx

@@ -30,6 +30,7 @@ import {t, tct} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import type {TagCollection} from 'sentry/types/group';
 import {defined} from 'sentry/utils';
+import {useElementWidth} from 'sentry/utils/useElementWidth';
 import {
   TableBodyCell,
   TableHead,
@@ -220,6 +221,7 @@ export function LogsInfiniteTable({
 
   const tableRef = useRef<HTMLTableElement>(null);
   const tableBodyRef = useRef<HTMLTableSectionElement>(null);
+  const tableWidth = useElementWidth(tableRef);
   const [expandedLogRows, setExpandedLogRows] = useState<Set<string>>(
     new Set(embeddedOptions?.openWithExpandedIds ?? [])
   );
@@ -556,7 +558,7 @@ export function LogsInfiniteTable({
       <FloatingBackToTopContainer
         position={expanded === undefined ? 'fixed' : 'absolute'}
         inReplay={!!embeddedOptions?.replay}
-        tableWidth={tableRef.current?.getBoundingClientRect().width ?? 0}
+        tableWidth={tableWidth}
       >
         {!embeddedOptions?.replay && (
           <BackToTopButton
@@ -571,9 +573,7 @@ export function LogsInfiniteTable({
           <JumpButtons jump="up" onClick={onClickToJump} tableHeaderHeight={0} />
         ) : null}
       </FloatingBackToTopContainer>
-      <FloatingBottomContainer
-        tableWidth={tableRef.current?.getBoundingClientRect().width ?? 0}
-      >
+      <FloatingBottomContainer tableWidth={tableWidth}>
         {embeddedOptions?.replay && showJumpDownButton ? (
           <JumpButtons jump="down" onClick={onClickToJump} tableHeaderHeight={0} />
         ) : null}