From 34b0f9cd50c3f158784c906fdf215a1a475eee63 Mon Sep 17 00:00:00 2001
From: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
Date: Thu, 12 Mar 2026 16:30:14 -0400
Subject: [PATCH] Prevent errant timeline scroll

---
 .../AddUserToAnotherGroupModal.dom.tsx        |  2 +-
 ts/components/CallsList.preload.tsx           |  2 +-
 ts/components/CallsNewCallButton.dom.tsx      |  2 +-
 .../CompositionRecordingDraft.dom.tsx         |  3 ++
 ts/components/ForwardMessagesModal.dom.tsx    |  2 +-
 .../GroupCallRemoteParticipants.dom.tsx       |  3 ++
 ts/components/LeftPane.dom.tsx                |  8 ++++--
 ts/components/MediaEditor.dom.tsx             |  3 ++
 ts/components/StoriesSettingsModal.dom.tsx    |  2 +-
 ts/components/TextAttachment.dom.tsx          |  2 +-
 .../conversation/ConversationHeader.dom.tsx   |  3 ++
 .../conversation/MessageMetadata.dom.tsx      |  3 ++
 ts/components/conversation/Timeline.dom.tsx   |  5 ++++
 .../ChooseGroupMembersModal.dom.tsx           |  2 +-
 .../PinnedMessagesPanel.dom.tsx               |  3 ++
 .../PreferencesSelectChatsDialog.dom.tsx      |  2 +-
 ts/hooks/useSizeObserver.dom.tsx              | 28 +++++++++++++------
 17 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/ts/components/AddUserToAnotherGroupModal.dom.tsx b/ts/components/AddUserToAnotherGroupModal.dom.tsx
index 019aad8ec4..1e444c153c 100644
--- a/ts/components/AddUserToAnotherGroupModal.dom.tsx
+++ b/ts/components/AddUserToAnotherGroupModal.dom.tsx
@@ -190,7 +190,7 @@ export function AddUserToAnotherGroupModal({
                     className="AddUserToAnotherGroupModal__list-wrapper"
                     ref={ref}
                   >
-                    {size != null && (
+                    {size != null && !size.hidden && (
                       <ListView
                         width={size.width}
                         height={size.height}
diff --git a/ts/components/CallsList.preload.tsx b/ts/components/CallsList.preload.tsx
index 67c2abcfbd..cbf1105829 100644
--- a/ts/components/CallsList.preload.tsx
+++ b/ts/components/CallsList.preload.tsx
@@ -1057,7 +1057,7 @@ export function CallsList({
         {(ref, size) => {
           return (
             <div className="CallsList__ListContainer" ref={ref}>
-              {size != null && (
+              {size != null && !size.hidden && (
                 <InfiniteLoader
                   ref={infiniteLoaderRef}
                   isRowLoaded={isRowLoaded}
diff --git a/ts/components/CallsNewCallButton.dom.tsx b/ts/components/CallsNewCallButton.dom.tsx
index 4c5a509859..0a51fbf747 100644
--- a/ts/components/CallsNewCallButton.dom.tsx
+++ b/ts/components/CallsNewCallButton.dom.tsx
@@ -314,7 +314,7 @@ export function CallsNewCall({
           {(ref, size) => {
             return (
               <div ref={ref} className="CallsNewCall__ListContainer">
-                {size != null && (
+                {size != null && !size.hidden && (
                   <List
                     className="CallsNewCall__List"
                     width={size.width}
diff --git a/ts/components/CompositionRecordingDraft.dom.tsx b/ts/components/CompositionRecordingDraft.dom.tsx
index 507b1365f8..9acb463999 100644
--- a/ts/components/CompositionRecordingDraft.dom.tsx
+++ b/ts/components/CompositionRecordingDraft.dom.tsx
@@ -49,6 +49,9 @@ export function CompositionRecordingDraft({
 
   const handleResize = useCallback(
     (size: Size) => {
+      if (size.hidden) {
+        return;
+      }
       if (size.width === state.width) {
         return;
       }
diff --git a/ts/components/ForwardMessagesModal.dom.tsx b/ts/components/ForwardMessagesModal.dom.tsx
index ffca23d11c..01ff8bbdd1 100644
--- a/ts/components/ForwardMessagesModal.dom.tsx
+++ b/ts/components/ForwardMessagesModal.dom.tsx
@@ -375,7 +375,7 @@ export function ForwardMessagesModal({
                     ref={ref}
                   >
                     <ConversationList
-                      dimensions={size ?? undefined}
+                      dimensions={size?.hidden === false ? size : undefined}
                       getPreferredBadge={getPreferredBadge}
                       getRow={getRow}
                       i18n={i18n}
diff --git a/ts/components/GroupCallRemoteParticipants.dom.tsx b/ts/components/GroupCallRemoteParticipants.dom.tsx
index 39efe15b2c..54447c40ef 100644
--- a/ts/components/GroupCallRemoteParticipants.dom.tsx
+++ b/ts/components/GroupCallRemoteParticipants.dom.tsx
@@ -484,6 +484,9 @@ export function GroupCallRemoteParticipants({
       <div className="module-ongoing-call__participants__grid--wrapper">
         <SizeObserver
           onSizeChange={size => {
+            if (size.hidden) {
+              return;
+            }
             setGridDimensions(size);
           }}
         >
diff --git a/ts/components/LeftPane.dom.tsx b/ts/components/LeftPane.dom.tsx
index 63d1bd38f2..c52f415c25 100644
--- a/ts/components/LeftPane.dom.tsx
+++ b/ts/components/LeftPane.dom.tsx
@@ -601,7 +601,9 @@ export function LeftPane({
   const previousMeasureSize = usePrevious(null, measureSize);
 
   const widthBreakpoint = getNavSidebarWidthBreakpoint(
-    measureSize?.width ?? preferredWidthFromStorage
+    measureSize && !measureSize.hidden
+      ? measureSize.width
+      : preferredWidthFromStorage
   );
 
   const commonDialogProps = {
@@ -926,7 +928,9 @@ export function LeftPane({
               >
                 <ConversationList
                   key={modeSpecificProps.mode}
-                  dimensions={measureSize ?? undefined}
+                  dimensions={
+                    measureSize?.hidden === false ? measureSize : undefined
+                  }
                   getPreferredBadge={getPreferredBadge}
                   getRow={getRow}
                   i18n={i18n}
diff --git a/ts/components/MediaEditor.dom.tsx b/ts/components/MediaEditor.dom.tsx
index fad8cc12f2..d94df9d794 100644
--- a/ts/components/MediaEditor.dom.tsx
+++ b/ts/components/MediaEditor.dom.tsx
@@ -1259,6 +1259,9 @@ export function MediaEditor({
       <div className="MediaEditor__container">
         <SizeObserver
           onSizeChange={size => {
+            if (size.hidden) {
+              return;
+            }
             setContainerWidth(size.width);
             setContainerHeight(size.height);
           }}
diff --git a/ts/components/StoriesSettingsModal.dom.tsx b/ts/components/StoriesSettingsModal.dom.tsx
index 827b97258d..faf8a48233 100644
--- a/ts/components/StoriesSettingsModal.dom.tsx
+++ b/ts/components/StoriesSettingsModal.dom.tsx
@@ -1220,7 +1220,7 @@ export function EditDistributionListModal({
           {(ref, size) => (
             <div className="StoriesSettingsModal__conversation-list" ref={ref}>
               <ConversationList
-                dimensions={size ?? undefined}
+                dimensions={size?.hidden === false ? size : undefined}
                 getPreferredBadge={getPreferredBadge}
                 getRow={getRow}
                 i18n={i18n}
diff --git a/ts/components/TextAttachment.dom.tsx b/ts/components/TextAttachment.dom.tsx
index dad5438844..7380b07bc6 100644
--- a/ts/components/TextAttachment.dom.tsx
+++ b/ts/components/TextAttachment.dom.tsx
@@ -174,7 +174,7 @@ export const TextAttachment = forwardRef<HTMLTextAreaElement, PropsType>(
     const ref = useRef<HTMLDivElement>(null);
     const size = useSizeObserver(ref);
 
-    const scaleFactor = (size?.height || 1) / 1280;
+    const scaleFactor = (size?.hidden === false ? size.height : 1) / 1280;
 
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
diff --git a/ts/components/conversation/ConversationHeader.dom.tsx b/ts/components/conversation/ConversationHeader.dom.tsx
index dbec843b98..42d6453582 100644
--- a/ts/components/conversation/ConversationHeader.dom.tsx
+++ b/ts/components/conversation/ConversationHeader.dom.tsx
@@ -316,6 +316,9 @@ export const ConversationHeader = memo(function ConversationHeader({
       )}
       <SizeObserver
         onSizeChange={size => {
+          if (size.hidden) {
+            return;
+          }
           setIsNarrow(size.width < 500);
         }}
       >
diff --git a/ts/components/conversation/MessageMetadata.dom.tsx b/ts/components/conversation/MessageMetadata.dom.tsx
index 1a38bce410..c2cbe622a6 100644
--- a/ts/components/conversation/MessageMetadata.dom.tsx
+++ b/ts/components/conversation/MessageMetadata.dom.tsx
@@ -302,6 +302,9 @@ export const MessageMetadata = forwardRef<HTMLDivElement, Readonly<PropsType>>(
 
     const onResize = useCallback(
       (size: Size) => {
+        if (size.hidden) {
+          return;
+        }
         onWidthMeasured?.(size.width);
       },
       [onWidthMeasured]
diff --git a/ts/components/conversation/Timeline.dom.tsx b/ts/components/conversation/Timeline.dom.tsx
index 315beda4b5..823e819f6e 100644
--- a/ts/components/conversation/Timeline.dom.tsx
+++ b/ts/components/conversation/Timeline.dom.tsx
@@ -1050,6 +1050,11 @@ export class Timeline extends React.Component<
       <ScrollerLockContext.Provider value={this.#scrollerLock}>
         <SizeObserver
           onSizeChange={size => {
+            if (size.hidden) {
+              // triggered when timeline is hidden via display: none
+              return;
+            }
+
             const { isNearBottom } = this.props;
 
             this.setState({
diff --git a/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.dom.tsx b/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.dom.tsx
index 2c41345ebd..0100dff7d9 100644
--- a/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.dom.tsx
+++ b/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.dom.tsx
@@ -449,7 +449,7 @@ export function ChooseGroupMembersModal({
                     }
                   }}
                 >
-                  {size != null && (
+                  {size != null && !size.hidden && (
                     <ListView
                       width={size.width}
                       height={size.height}
diff --git a/ts/components/conversation/pinned-messages/PinnedMessagesPanel.dom.tsx b/ts/components/conversation/pinned-messages/PinnedMessagesPanel.dom.tsx
index 0ea194ca2c..6f42cf6403 100644
--- a/ts/components/conversation/pinned-messages/PinnedMessagesPanel.dom.tsx
+++ b/ts/components/conversation/pinned-messages/PinnedMessagesPanel.dom.tsx
@@ -61,6 +61,9 @@ export const PinnedMessagesPanel = memo(function PinnedMessagesPanel(
   }, []);
 
   useSizeObserver(containerElementRef, size => {
+    if (size.hidden) {
+      return;
+    }
     setContainerWidthBreakpoint(getWidthBreakpoint(size.width));
   });
 
diff --git a/ts/components/preferences/PreferencesSelectChatsDialog.dom.tsx b/ts/components/preferences/PreferencesSelectChatsDialog.dom.tsx
index 3973eb7e2e..f7911e823a 100644
--- a/ts/components/preferences/PreferencesSelectChatsDialog.dom.tsx
+++ b/ts/components/preferences/PreferencesSelectChatsDialog.dom.tsx
@@ -246,7 +246,7 @@ export function PreferencesSelectChatsDialog(
         {(ref, size) => {
           return (
             <div ref={ref} className={tw('min-h-[100px] w-full flex-grow')}>
-              {size != null && (
+              {size != null && !size.hidden && (
                 <ConversationList
                   dimensions={size}
                   i18n={i18n}
diff --git a/ts/hooks/useSizeObserver.dom.tsx b/ts/hooks/useSizeObserver.dom.tsx
index dba97a7d10..b61be5467b 100644
--- a/ts/hooks/useSizeObserver.dom.tsx
+++ b/ts/hooks/useSizeObserver.dom.tsx
@@ -4,17 +4,31 @@ import type { RefObject } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { strictAssert } from '../util/assert.std.js';
 
-export type Size = Readonly<{
-  width: number;
-  height: number;
-}>;
+export type Size = Readonly<
+  { hidden: false; width: number; height: number } | { hidden: true }
+>;
 
 export type SizeChangeHandler = (size: Size) => void;
 
 export function isSameSize(a: Size, b: Size): boolean {
+  if (a.hidden || b.hidden) {
+    if (a.hidden && b.hidden) {
+      return true;
+    }
+    return false;
+  }
   return a.width === b.width && a.height === b.height;
 }
 
+function getNextSize(borderBoxSize: ResizeObserverSize): Size {
+  const width = borderBoxSize.inlineSize;
+  const height = borderBoxSize.blockSize;
+  if (width === 0 && height === 0) {
+    return { hidden: true };
+  }
+  return { hidden: false, width, height };
+}
+
 export function useSizeObserver<T extends Element = Element>(
   ref: RefObject<T>,
   /**
@@ -42,10 +56,8 @@ export function useSizeObserver<T extends Element = Element>(
       // We are assuming a horizontal writing-mode here, we could call
       // `getBoundingClientRect()` here but MDN says not to. In the future if
       // we are adding support for a vertical locale we may need to change this
-      const next: Size = {
-        width: borderBoxSize.inlineSize,
-        height: borderBoxSize.blockSize,
-      };
+
+      const next = getNextSize(borderBoxSize);
       const prev = sizeRef.current;
       if (prev == null || !isSameSize(prev, next)) {
         sizeRef.current = next;