Revert buggy timeline layout refactor

stylesheets/_modules.scss

@@ -5448,7 +5448,6 @@ button.module-image__border-overlay:focus {
 
 .module-timeline {
   display: flex;
-  flex-direction: column;
   height: 100%;
   overflow: hidden;
 }
@@ -5463,7 +5462,6 @@ 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: sticky;
+  position: absolute;
   top: 10px;
   transition: opacity 0.25s ease-out;
   width: 100%;

stylesheets/components/TimelineWarnings.scss

@@ -2,7 +2,12 @@
 // 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

@@ -173,6 +173,7 @@ export type PropsType = PropsDataType &
 type StateType = {
   hasDismissedDirectContactSpoofingWarning: boolean;
   hasRecentlyScrolled: boolean;
+  lastMeasuredWarningHeight: number;
   newestBottomVisibleMessageId?: string;
   oldestPartiallyVisibleMessageId?: string;
   widthBreakpoint: WidthBreakpoint;
@@ -276,7 +277,8 @@ export class Timeline extends React.Component<
     hasRecentlyScrolled: true,
     hasDismissedDirectContactSpoofingWarning: false,
 
-    // This may be swiftly overridden.
+    // These may be swiftly overridden.
+    lastMeasuredWarningHeight: 0,
     widthBreakpoint: WidthBreakpoint.Wide,
   };
 
@@ -792,6 +794,7 @@ export class Timeline extends React.Component<
     } = this.props;
     const {
       hasRecentlyScrolled,
+      lastMeasuredWarningHeight,
       newestBottomVisibleMessageId,
       oldestPartiallyVisibleMessageId,
       widthBreakpoint,
@@ -845,6 +848,11 @@ export class Timeline extends React.Component<
         <TimelineFloatingHeader
           i18n={i18n}
           isLoading={isLoadingMessages}
+          style={
+            lastMeasuredWarningHeight
+              ? { marginTop: lastMeasuredWarningHeight }
+              : undefined
+          }
           timestamp={oldestPartiallyVisibleMessageTimestamp}
           visible={
             (hasRecentlyScrolled || isLoadingMessages) &&
@@ -976,14 +984,27 @@ export class Timeline extends React.Component<
       }
 
       timelineWarning = (
-        <TimelineWarnings>
-          <TimelineWarning i18n={i18n} onClose={onClose}>
-            <TimelineWarning.IconContainer>
-              <TimelineWarning.GenericIcon />
-            </TimelineWarning.IconContainer>
-            <TimelineWarning.Text>{text}</TimelineWarning.Text>
-          </TimelineWarning>
-        </TimelineWarnings>
+        <Measure
+          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 />
+                </TimelineWarning.IconContainer>
+                <TimelineWarning.Text>{text}</TimelineWarning.Text>
+              </TimelineWarning>
+            </TimelineWarnings>
+          )}
+        </Measure>
       );
     }
 
@@ -1066,13 +1087,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',
@@ -1080,8 +1101,14 @@ export class Timeline extends React.Component<
                   )}
                   ref={this.messagesRef}
                 >
-                  {haveOldest &&
-                    renderHeroRow(id, unblurAvatar, updateSharedGroups)}
+                  {haveOldest && (
+                    <>
+                      {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 { ReactElement } from 'react';
+import type { CSSProperties, ReactElement } from 'react';
 import React, { useEffect, useState } from 'react';
 import type { LocalizerType } from '../../types/Util';
 import { TimelineDateHeader } from './TimelineDateHeader';
@@ -11,11 +11,13 @@ import { Spinner } from '../Spinner';
 export const TimelineFloatingHeader = ({
   i18n,
   isLoading,
+  style,
   timestamp,
   visible,
 }: Readonly<{
   i18n: LocalizerType;
   isLoading: boolean;
+  style?: CSSProperties;
   timestamp: number;
   visible: boolean;
 }>): ReactElement => {
@@ -33,6 +35,7 @@ export const TimelineFloatingHeader = ({
           visible && hasRendered ? 'visible' : 'hidden'
         }`
       )}
+      style={style}
     >
       <TimelineDateHeader floating i18n={i18n} timestamp={timestamp} />
       <div

ts/components/conversation/TimelineWarnings.tsx

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