Simplify positioning of timeline warnings

stylesheets/_modules.scss

@@ -5452,6 +5452,7 @@ button.module-image__border-overlay:focus {
 
 .module-timeline {
   display: flex;
+  flex-direction: column;
   height: 100%;
   overflow: hidden;
 }
@@ -5466,6 +5467,7 @@ button.module-image__border-overlay:focus {
   overflow-y: overlay;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .module-timeline__messages {

stylesheets/components/TimelineFloatingHeader.scss

@@ -7,7 +7,7 @@
   flex-direction: column;
   left: 0;
   pointer-events: none;
-  position: absolute;
+  position: sticky;
   top: 10px;
   transition: opacity 0.25s ease-out;
   width: 100%;

stylesheets/components/TimelineWarnings.scss

@@ -2,12 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-TimelineWarnings {
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: $z-index-above-above-base;
-
   display: flex;
   flex-direction: column;
+  width: 100%;
 }

ts/components/conversation/Timeline.tsx

@@ -171,7 +171,6 @@ export type PropsType = PropsDataType &
 type StateType = {
   hasDismissedDirectContactSpoofingWarning: boolean;
   hasRecentlyScrolled: boolean;
-  lastMeasuredWarningHeight: number;
   newestFullyVisibleMessageId?: string;
   oldestPartiallyVisibleMessageId?: string;
   widthBreakpoint: WidthBreakpoint;
@@ -274,8 +273,7 @@ export class Timeline extends React.Component<
     hasRecentlyScrolled: true,
     hasDismissedDirectContactSpoofingWarning: false,
 
-    // These may be swiftly overridden.
+    // This may be swiftly overridden.
-    lastMeasuredWarningHeight: 0,
     widthBreakpoint: WidthBreakpoint.Wide,
   };
 
@@ -766,7 +764,6 @@ export class Timeline extends React.Component<
     } = this.props;
     const {
       hasRecentlyScrolled,
-      lastMeasuredWarningHeight,
       newestFullyVisibleMessageId,
       oldestPartiallyVisibleMessageId,
       widthBreakpoint,
@@ -820,11 +817,6 @@ export class Timeline extends React.Component<
         <TimelineFloatingHeader
           i18n={i18n}
           isLoading={isLoadingMessages}
-          style={
-            lastMeasuredWarningHeight
-              ? { marginTop: lastMeasuredWarningHeight }
-              : undefined
-          }
           timestamp={oldestPartiallyVisibleMessageTimestamp}
           visible={
             (hasRecentlyScrolled || isLoadingMessages) &&
@@ -956,18 +948,7 @@ export class Timeline extends React.Component<
       }
 
       timelineWarning = (
-        <Measure
+        <TimelineWarnings>
-          bounds
-          onResize={({ bounds }) => {
-            if (!bounds) {
-              assert(false, 'We should be measuring the bounds');
-              return;
-            }
-            this.setState({ lastMeasuredWarningHeight: bounds.height });
-          }}
-        >
-          {({ measureRef }) => (
-            <TimelineWarnings ref={measureRef}>
           <TimelineWarning i18n={i18n} onClose={onClose}>
             <TimelineWarning.IconContainer>
               <TimelineWarning.GenericIcon />
@@ -975,8 +956,6 @@ export class Timeline extends React.Component<
             <TimelineWarning.Text>{text}</TimelineWarning.Text>
           </TimelineWarning>
         </TimelineWarnings>
-          )}
-        </Measure>
       );
     }
 
@@ -1059,13 +1038,13 @@ export class Timeline extends React.Component<
             >
               {timelineWarning}
 
-              {floatingHeader}
-
               <div
                 className="module-timeline__messages__container"
                 onScroll={this.onScroll}
                 ref={this.containerRef}
               >
+                {floatingHeader}
+
                 <div
                   className={classNames(
                     'module-timeline__messages',
@@ -1073,14 +1052,8 @@ export class Timeline extends React.Component<
                   )}
                   ref={this.messagesRef}
                 >
-                  {haveOldest && (
+                  {haveOldest &&
-                    <>
+                    renderHeroRow(id, unblurAvatar, updateSharedGroups)}
-                      {Timeline.getWarning(this.props, this.state) && (
-                        <div style={{ height: lastMeasuredWarningHeight }} />
-                      )}
-                      {renderHeroRow(id, unblurAvatar, updateSharedGroups)}
-                    </>
-                  )}
 
                   {messageNodes}
 

ts/components/conversation/TimelineFloatingHeader.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import classNames from 'classnames';
-import type { CSSProperties, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import React, { useEffect, useState } from 'react';
 import type { LocalizerType } from '../../types/Util';
 import { TimelineDateHeader } from './TimelineDateHeader';
@@ -11,13 +11,11 @@ import { Spinner } from '../Spinner';
 export const TimelineFloatingHeader = ({
   i18n,
   isLoading,
-  style,
   timestamp,
   visible,
 }: Readonly<{
   i18n: LocalizerType;
   isLoading: boolean;
-  style?: CSSProperties;
   timestamp: number;
   visible: boolean;
 }>): ReactElement => {
@@ -35,7 +33,6 @@ export const TimelineFloatingHeader = ({
           visible && hasRendered ? 'visible' : 'hidden'
         }`
       )}
-      style={style}
     >
       <TimelineDateHeader floating i18n={i18n} timestamp={timestamp} />
       <div

ts/components/conversation/TimelineWarnings.tsx

@@ -1,19 +1,11 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { ReactNode } from 'react';
+import type { FunctionComponent } from 'react';
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 const CLASS_NAME = 'module-TimelineWarnings';
 
-type PropsType = {
+export const TimelineWarnings: FunctionComponent = ({ children }) => (
-  children: ReactNode;
+  <div className={CLASS_NAME}>{children}</div>
-};
-
-export const TimelineWarnings = forwardRef<HTMLDivElement, PropsType>(
-  ({ children }, ref) => (
-    <div className={CLASS_NAME} ref={ref}>
-      {children}
-    </div>
-  )
 );