diff --git a/web/chat/chat-constants.js b/web/chat/chat-constants.js
index 549ccf436..4328ced8d 100644
--- a/web/chat/chat-constants.js
+++ b/web/chat/chat-constants.js
@@ -1,27 +1,55 @@
 // @flow
 
+import { messageKey } from 'lib/shared/message-utils.js';
+import type { MessageInfo } from 'lib/types/message-types.js';
+
+import type { ComposedMessageID } from './composed-message.react.js';
+
 export const tooltipStyle = {
   paddingLeft: 5,
   paddingRight: 5,
   rowGap: 3,
 };
 
 export const tooltipLabelStyle = {
   padding: 6,
   height: 20,
 };
 export const tooltipButtonStyle = {
   paddingLeft: 6,
   paddingRight: 6,
   width: 30,
   height: 38,
 };
 
 export const typeaheadStyle = {
   tooltipWidth: 296,
   tooltipMaxHeight: 268,
   tooltipVerticalPadding: 16,
   tooltipLeftOffset: 16,
   tooltipTopOffset: 4,
   rowHeight: 40,
 };
+
+export const getComposedMessageID = (
+  messageInfo: MessageInfo,
+): ComposedMessageID => {
+  return `ComposedMessageBox-${messageKey(messageInfo)}`;
+};
+
+export const defaultMaxTextAreaHeight = 150;
+
+// The editBoxBottomRowHeight is the height of the bottom row in the edit box
+// which is the height of the buttons in the bottom row.
+export const editBoxBottomRowHeight = 22;
+
+// The editBoxHeight is a height of the all elements of the edit box
+// except for the textarea.
+// It consists of:
+// - 2 * 10px:  .editMessage padding (edit-text-message.css)
+// - 10px:      .bottomRow padding between the bottom row buttons
+//                and the textarea (edit-text-message.css)
+// - 2 * 8px:   .inputBarTextInput padding (chat-input-bar.css)
+// - 22px:      height of the bottom row in the edit box (explained above)
+// - textarea height which is NOT included here
+export const editBoxHeight: number = 3 * 10 + 2 * 8 + editBoxBottomRowHeight;
diff --git a/web/chat/chat-input-bar.css b/web/chat/chat-input-bar.css
index 827214de6..aa34247dc 100644
--- a/web/chat/chat-input-bar.css
+++ b/web/chat/chat-input-bar.css
@@ -1,85 +1,86 @@
 div.inputBar {
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--border-color);
 }
 div.inputBarWrapper {
   padding: 16px;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 div.inputBarTextInput {
   display: flex;
   background: var(--text-input-bg);
   border-radius: 8px;
+  /* Related to editBoxHeight in the `edit-text-message` component */
   padding: 8px;
   align-items: center;
   flex-grow: 1;
 }
 div.inputBarTextInput > textarea {
   flex: 1;
   display: flex;
   border: none;
   resize: none;
   background: var(--text-input-bg);
   color: var(--fg);
 }
 div.inputBarTextInput > textarea:focus {
   outline: none;
 }
 div.joinButtonContainer {
   background: var(--join-bg);
   padding-top: 8px;
   padding-bottom: 8px;
   display: flex;
   flex-direction: row;
   width: 100%;
   justify-content: center;
 }
 p.joinButtonText {
   font-weight: var(--semi-bold);
   padding-left: 8px;
 }
 span.explanation {
   color: var(--permission-color);
   text-align: center;
   padding-top: 20px;
   padding-bottom: 8px;
 }
 a.multimediaUpload {
   cursor: pointer;
   position: relative;
   padding-right: 12px;
 }
 a.multimediaUpload > input[type='file'] {
   visibility: hidden;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: 0;
   padding: 0;
 }
 a.multimediaUpload:hover > svg {
   opacity: 0.8;
 }
 
 div.previews {
   display: flex;
   overflow-x: auto;
   white-space: nowrap;
 }
 div.previews > span.multimedia {
   margin: 10px;
 }
 div.previews > span.multimedia > span.multimediaImage > img {
   max-height: 200px;
   max-width: 200px;
 }
 
 a.sendButton {
   padding: 8px 0 0 10px;
   cursor: pointer;
 }
diff --git a/web/chat/chat-input-text-area.react.js b/web/chat/chat-input-text-area.react.js
index 5fc3ee7fe..fd97e985a 100644
--- a/web/chat/chat-input-text-area.react.js
+++ b/web/chat/chat-input-text-area.react.js
@@ -1,114 +1,117 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
+import { defaultMaxTextAreaHeight } from './chat-constants.js';
 import css from './chat-input-bar.css';
 
 type Props = {
   +send?: () => mixed,
   +escape?: () => void,
   +focus: boolean,
   +currentText: string,
   +setCurrentText: (text: string) => void,
   +onChangePosition: () => void,
+  +maxHeight?: number,
 };
 
 const ChatInputTextArea: React.ComponentType<Props> = React.memo<Props>(
   function ChatInputTextArea(props: Props) {
     const {
       currentText,
       focus,
       escape,
       send,
       setCurrentText,
       onChangePosition,
+      maxHeight = defaultMaxTextAreaHeight,
     } = props;
     const textareaRef = React.useRef(null);
 
     const focusAndUpdateText = React.useCallback(() => {
       if (!focus) {
         return;
       }
 
       // We need to call focus() first on Safari, otherwise the cursor
       // ends up at the start instead of the end for some reason
       const textarea = textareaRef.current;
       invariant(textarea, 'textarea should be set');
       textarea.focus();
 
       // We reset the textarea to an empty string at the start so that
       // the cursor always ends up at the end, even if the text doesn't
       // actually change
       textarea.value = '';
       if (currentText) {
         textarea.value = currentText;
       }
       // The above strategies make sure the cursor is at the end,
       // but we also need to make sure that we're scrolled to the bottom
       textarea.scrollTop = textarea.scrollHeight;
     }, [currentText, focus]);
 
     const updateHeight = React.useCallback(() => {
       const textarea = textareaRef.current;
       if (textarea) {
         textarea.style.height = 'auto';
-        const newHeight = Math.min(textarea.scrollHeight, 150);
+        const newHeight = Math.min(textarea.scrollHeight, maxHeight);
         textarea.style.height = `${newHeight}px`;
       }
       onChangePosition();
-    }, [onChangePosition]);
+    }, [maxHeight, onChangePosition]);
 
     React.useEffect(() => {
       focusAndUpdateText();
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     React.useEffect(() => {
       updateHeight();
       // We want to update the height when the text changes. We can't include
       // updateHeight in the dep list because it causes a stack overflow... see
       // comments on D8035 for more details
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentText]);
 
     const onKeyDown = (event: SyntheticKeyboardEvent<HTMLTextAreaElement>) => {
       if (event.key === 'Escape') {
         event.preventDefault();
         if (!escape) {
           return;
         }
         escape();
       } else if (event.key === 'Enter' && !event.shiftKey) {
         event.preventDefault();
         if (!send) {
           return;
         }
         send();
       }
     };
 
     const onChangeMessageText = (
       event: SyntheticEvent<HTMLTextAreaElement>,
     ) => {
       setCurrentText(event.currentTarget.value);
       updateHeight();
     };
 
     return (
       <div className={css.inputBarTextInput}>
         <textarea
           rows="1"
           placeholder="Type your message"
           value={currentText}
           onChange={onChangeMessageText}
           onKeyDown={onKeyDown}
           ref={textareaRef}
           autoFocus
         />
       </div>
     );
   },
 );
 
 export default ChatInputTextArea;
diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
index aeabc0856..b2dbbfd8a 100644
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -1,241 +1,244 @@
 div.outerMessageContainer {
   position: relative;
   height: calc(100vh - 128px);
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
 div.messageContainer {
   height: 100%;
   overflow-y: auto;
   display: flex;
   flex-direction: column-reverse;
 }
 div.mirroredMessageContainer {
   flex-direction: column !important;
   transform: scaleY(-1);
 }
 div.mirroredMessageContainer > div {
   transform: scaleY(-1);
 }
+div.disableAnchor {
+  overflow-anchor: none;
+}
 
 div.message {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
 }
 
 div.loading {
   text-align: center;
   padding: 12px;
 }
 
 div.conversationHeader {
   color: var(--chat-timestamp-color);
   font-size: var(--xs-font-12);
   padding: 6px 0;
   line-height: var(--line-height-text);
   text-align: center;
 }
 div.conversationHeader:last-child {
   padding-top: 6px;
 }
 
 div.messageTooltipActiveArea {
   position: absolute;
   display: flex;
   top: 0;
   bottom: 0;
   align-items: center;
   padding: 0 12px;
 }
 
 div.viewerMessageTooltipActiveArea {
   right: 100%;
 }
 div.nonViewerMessageActiveArea {
   left: 100%;
 }
 div.messageTooltipActiveArea > div + div {
   margin-left: 4px;
 }
 
 div.messageTooltipLinkIcon:hover {
   cursor: pointer;
 }
 
 div.textMessage {
   padding: 6px 12px;
   white-space: pre-wrap;
   word-wrap: break-word;
   width: 100%;
   box-sizing: border-box;
 }
 div.textMessageDefaultBackground {
   background-color: var(--text-message-default-background);
 }
 div.normalTextMessage {
   font-size: 16px;
 }
 div.emojiOnlyTextMessage {
   font-size: 32px;
   font-family: emoji;
 }
 span.authorName {
   color: #777777;
   font-size: 14px;
   padding: 4px 56px;
 }
 
 div.darkTextMessage {
   color: white;
 }
 div.lightTextMessage {
   color: black;
 }
 
 div.content {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   margin-bottom: 5px;
   box-sizing: border-box;
   width: 100%;
 }
 div.nonViewerContent {
   align-self: flex-start;
   justify-content: flex-start;
   padding-right: 8px;
 }
 div.viewerContent {
   align-self: flex-end;
   justify-content: flex-end;
   padding-right: 4px;
 }
 div.iconContainer {
   margin-right: 1px;
 }
 div.iconContainer > svg {
   height: 16px;
 }
 
 div.messageBoxContainer {
   position: relative;
   display: flex;
   max-width: calc(min(68%, 1000px));
   margin: 0 4px;
 }
 
 div.fixedWidthMessageBoxContainer {
   width: 68%;
 }
 
 div.messageBox {
   overflow: hidden;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   flex-shrink: 0;
   max-width: 100%;
 }
 div.fixedWidthMessageBox {
   width: 100%;
 }
 
 div.failedSend {
   display: flex;
   justify-content: flex-end;
   flex-shrink: 0;
   margin-right: 45px;
   padding-bottom: 6px;
 }
 
 .deliveryFailed {
   text-transform: uppercase;
   font-size: 14px;
   padding: 0 3px;
   color: var(--fg);
 }
 
 .retryButtonText {
   text-transform: uppercase;
   font-size: 14px;
 }
 
 div.messageBox > div.imageGrid {
   display: grid;
   width: 100%;
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 5px;
 }
 div.messageBox span.multimedia > span.multimediaImage {
   min-height: initial;
   min-width: initial;
 }
 div.messageBox span.multimedia > span.multimediaImage > img {
   max-height: 600px;
 }
 
 div.imageGrid > span.multimedia {
   grid-column-end: span 3;
 }
 div.imageGrid > span.multimedia:first-child {
   margin-top: 0;
 }
 div.imageGrid > span.multimedia > span.multimediaImage {
   flex: 1;
 }
 div.imageGrid > span.multimedia > span.multimediaImage:after {
   content: '';
   display: block;
   padding-bottom: calc(min(600px, 100%));
 }
 div.imageGrid > span.multimedia > span.multimediaImage > img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 div.imageGrid > span.multimedia:nth-last-child(n + 3):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n + 3):first-child ~ * {
   grid-column-end: span 2;
 }
 div.imageGrid > span.multimedia:nth-last-child(n + 4):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n + 4):first-child ~ * {
   grid-column-end: span 3;
 }
 div.imageGrid > span.multimedia:nth-last-child(n + 5):first-child,
 div.imageGrid > span.multimedia:nth-last-child(n + 5):first-child ~ * {
   grid-column-end: span 2;
 }
 div.sidebarMarginBottom {
   margin-bottom: 2px;
 }
 svg.inlineEngagementIcon {
   color: #666666;
 }
 
 div.avatarContainer {
   display: flex;
   height: 100%;
   align-items: flex-end;
   margin: 0 4px 0 12px;
 }
 
 div.avatarOffset {
   width: 40px;
 }
 
 .pinIconContainer {
   position: absolute;
   top: 1px;
 }
 
 .pinIconLeft {
   left: -20px;
 }
 
 .pinIconRight {
   right: -20px;
 }
diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js
index 13f620aff..4fc2c5616 100644
--- a/web/chat/chat-message-list.react.js
+++ b/web/chat/chat-message-list.react.js
@@ -1,338 +1,478 @@
 // @flow
 
 import classNames from 'classnames';
 import { detect as detectBrowser } from 'detect-browser';
 import invariant from 'invariant';
+import _debounce from 'lodash/debounce.js';
 import * as React from 'react';
 
 import {
   fetchMessagesBeforeCursorActionTypes,
   fetchMessagesBeforeCursor,
   fetchMostRecentMessagesActionTypes,
   fetchMostRecentMessages,
 } from 'lib/actions/message-actions.js';
 import { useOldestMessageServerID } from 'lib/hooks/message-hooks.js';
 import { registerFetchKey } from 'lib/reducers/loading-reducer.js';
 import {
   type ChatMessageItem,
   useMessageListData,
 } from 'lib/selectors/chat-selectors.js';
 import { messageKey } from 'lib/shared/message-utils.js';
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 import type { FetchMessageInfosPayload } from 'lib/types/message-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
+import { editBoxHeight, defaultMaxTextAreaHeight } from './chat-constants.js';
 import css from './chat-message-list.css';
+import type { ScrollToMessageCallback } from './edit-message-provider.js';
 import { useEditModalContext } from './edit-message-provider.js';
 import { MessageListContext } from './message-list-types.js';
 import Message from './message.react.js';
 import RelationshipPrompt from './relationship-prompt/relationship-prompt.js';
 import { useTooltipContext } from './tooltip-provider.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import { useTextMessageRulesFunc } from '../markdown/rules.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const browser = detectBrowser();
 const supportsReverseFlex =
   !browser || browser.name !== 'firefox' || parseInt(browser.version) >= 81;
 
+// Margin between the top of the maximum height edit box
+// and the top of the container
+const editBoxTopMargin = 10;
+
 type BaseProps = {
   +threadInfo: ThreadInfo,
 };
 
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +messageListData: ?$ReadOnlyArray<ChatMessageItem>,
   +startReached: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +fetchMessagesBeforeCursor: (
     threadID: string,
     beforeMessageID: string,
   ) => Promise<FetchMessageInfosPayload>,
   +fetchMostRecentMessages: (
     threadID: string,
   ) => Promise<FetchMessageInfosPayload>,
   +inputState: ?InputState,
   +clearTooltip: () => mixed,
   +oldestMessageServerID: ?string,
   +isEditState: boolean,
+  +addScrollToMessageListener: ScrollToMessageCallback => mixed,
+  +removeScrollToMessageListener: ScrollToMessageCallback => mixed,
 };
 type Snapshot = {
   +scrollTop: number,
   +scrollHeight: number,
 };
-class ChatMessageList extends React.PureComponent<Props> {
+
+type State = {
+  +scrollingEndCallback: ?() => mixed,
+};
+
+class ChatMessageList extends React.PureComponent<Props, State> {
   container: ?HTMLDivElement;
   messageContainer: ?HTMLDivElement;
   loadingFromScroll = false;
 
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      scrollingEndCallback: null,
+    };
+  }
+
   componentDidMount() {
     this.scrollToBottom();
+    this.props.addScrollToMessageListener(this.scrollToMessage);
+  }
+
+  componentWillUnmount() {
+    this.props.removeScrollToMessageListener(this.scrollToMessage);
   }
 
   getSnapshotBeforeUpdate(prevProps: Props) {
     if (
       ChatMessageList.hasNewMessage(this.props, prevProps) &&
       this.messageContainer
     ) {
       const { scrollTop, scrollHeight } = this.messageContainer;
       return { scrollTop, scrollHeight };
     }
     return null;
   }
 
   static hasNewMessage(props: Props, prevProps: Props) {
     const { messageListData } = props;
     if (!messageListData || messageListData.length === 0) {
       return false;
     }
     const prevMessageListData = prevProps.messageListData;
     if (!prevMessageListData || prevMessageListData.length === 0) {
       return true;
     }
     return (
       ChatMessageList.keyExtractor(prevMessageListData[0]) !==
       ChatMessageList.keyExtractor(messageListData[0])
     );
   }
 
   componentDidUpdate(prevProps: Props, prevState, snapshot: ?Snapshot) {
     const { messageListData } = this.props;
     const prevMessageListData = prevProps.messageListData;
 
     const { messageContainer } = this;
     if (messageContainer && prevMessageListData !== messageListData) {
       this.onScroll();
     }
 
     // We'll scroll to the bottom if the user was already scrolled to the bottom
     // before the new message, or if the new message was composed locally
     const hasNewMessage = ChatMessageList.hasNewMessage(this.props, prevProps);
     if (
       this.props.activeChatThreadID !== prevProps.activeChatThreadID ||
       (hasNewMessage &&
         messageListData &&
         messageListData[0].itemType === 'message' &&
         messageListData[0].messageInfo.localID) ||
       (hasNewMessage &&
         snapshot &&
         Math.abs(snapshot.scrollTop) <= 1 &&
         !this.props.isEditState)
     ) {
       this.scrollToBottom();
     } else if (hasNewMessage && messageContainer && snapshot) {
       const { scrollTop, scrollHeight } = messageContainer;
       if (
         scrollHeight > snapshot.scrollHeight &&
         scrollTop === snapshot.scrollTop
       ) {
         const newHeight = scrollHeight - snapshot.scrollHeight;
         const newScrollTop = Math.abs(scrollTop) + newHeight;
         if (supportsReverseFlex) {
           messageContainer.scrollTop = -1 * newScrollTop;
         } else {
           messageContainer.scrollTop = newScrollTop;
         }
       }
     }
   }
 
   scrollToBottom() {
     if (this.messageContainer) {
       this.messageContainer.scrollTop = 0;
     }
   }
 
   static keyExtractor(item: ChatMessageItem) {
     if (item.itemType === 'loader') {
       return 'loader';
     }
     return messageKey(item.messageInfo);
   }
 
   renderItem = item => {
     if (item.itemType === 'loader') {
       return (
         <div key="loader" className={css.loading}>
           <LoadingIndicator status="loading" size="large" color="white" />
         </div>
       );
     }
     const { threadInfo } = this.props;
     invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
     return (
       <Message
         item={item}
         threadInfo={threadInfo}
         shouldDisplayPinIndicator={true}
         key={ChatMessageList.keyExtractor(item)}
       />
     );
   };
 
+  scrollingEndCallbackWrapper = (
+    composedMessageID: string,
+    callback: (maxHeight: number) => mixed,
+  ): (() => mixed) => {
+    return () => {
+      const maxHeight = this.getMaxEditTextAreaHeight(composedMessageID);
+      callback(maxHeight);
+    };
+  };
+
+  scrollToMessage = (
+    composedMessageID: string,
+    callback: (maxHeight: number) => mixed,
+  ) => {
+    const element = document.getElementById(composedMessageID);
+    if (!element) {
+      return;
+    }
+    const scrollingEndCallback = this.scrollingEndCallbackWrapper(
+      composedMessageID,
+      callback,
+    );
+    if (!this.willMessageEditWindowOverflow(composedMessageID)) {
+      scrollingEndCallback();
+      return;
+    }
+    this.setState(
+      {
+        scrollingEndCallback,
+      },
+      () => {
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        // It covers the case when browser decide not to scroll to the message
+        // because it's already in the view.
+        // In this case, the 'scroll' event won't be triggered,
+        // so we need to call the callback manually.
+        this.debounceEditModeAfterScrollToMessage();
+      },
+    );
+  };
+
+  getMaxEditTextAreaHeight = (composedMessageID: string): number => {
+    const { messageContainer } = this;
+    if (!messageContainer) {
+      return defaultMaxTextAreaHeight;
+    }
+    const messageElement = document.getElementById(composedMessageID);
+    if (!messageElement) {
+      console.log(`couldn't find the message element`);
+      return defaultMaxTextAreaHeight;
+    }
+
+    const msgPos = messageElement.getBoundingClientRect();
+    const containerPos = messageContainer.getBoundingClientRect();
+
+    const messageBottom = msgPos.bottom;
+    const containerTop = containerPos.top;
+
+    const maxHeight =
+      messageBottom - containerTop - editBoxHeight - editBoxTopMargin;
+
+    return maxHeight;
+  };
+
+  willMessageEditWindowOverflow(composedMessageID: string) {
+    const { messageContainer } = this;
+    if (!messageContainer) {
+      return false;
+    }
+    const messageElement = document.getElementById(composedMessageID);
+    if (!messageElement) {
+      console.log(`couldn't find the message element`);
+      return false;
+    }
+
+    const msgPos = messageElement.getBoundingClientRect();
+    const containerPos = messageContainer.getBoundingClientRect();
+    const containerTop = containerPos.top;
+    const containerBottom = containerPos.bottom;
+
+    const availableTextAreaHeight =
+      (containerBottom - containerTop) / 2 - editBoxHeight;
+    const messageHeight = msgPos.height;
+    const expectedMinimumHeight = Math.min(
+      defaultMaxTextAreaHeight,
+      availableTextAreaHeight,
+    );
+    const offset = Math.max(
+      0,
+      expectedMinimumHeight + editBoxHeight + editBoxTopMargin - messageHeight,
+    );
+
+    const messageTop = msgPos.top - offset;
+    const messageBottom = msgPos.bottom;
+
+    return messageBottom > containerBottom || messageTop < containerTop;
+  }
+
   render() {
-    const { messageListData, threadInfo, inputState } = this.props;
+    const { messageListData, threadInfo, inputState, isEditState } = this.props;
     if (!messageListData) {
       return <div className={css.container} />;
     }
     invariant(inputState, 'InputState should be set');
     const messages = messageListData.map(this.renderItem);
 
     let relationshipPrompt = null;
     if (threadInfo.type === threadTypes.PERSONAL) {
       relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />;
     }
 
     const messageContainerStyle = classNames({
+      [css.disableAnchor]:
+        this.state.scrollingEndCallback !== null || isEditState,
       [css.messageContainer]: true,
       [css.mirroredMessageContainer]: !supportsReverseFlex,
     });
     return (
       <div className={css.outerMessageContainer}>
         {relationshipPrompt}
         <div className={messageContainerStyle} ref={this.messageContainerRef}>
           {messages}
         </div>
       </div>
     );
   }
 
   messageContainerRef = (messageContainer: ?HTMLDivElement) => {
     this.messageContainer = messageContainer;
     // In case we already have all the most recent messages,
     // but they're not enough
     this.possiblyLoadMoreMessages();
     if (messageContainer) {
       messageContainer.addEventListener('scroll', this.onScroll);
     }
   };
 
   onScroll = () => {
     if (!this.messageContainer) {
       return;
     }
     this.props.clearTooltip();
     this.possiblyLoadMoreMessages();
+    this.debounceEditModeAfterScrollToMessage();
   };
 
+  debounceEditModeAfterScrollToMessage = _debounce(() => {
+    if (this.state.scrollingEndCallback) {
+      this.state.scrollingEndCallback();
+    }
+    this.setState({ scrollingEndCallback: null });
+  }, 100);
+
   async possiblyLoadMoreMessages() {
     if (!this.messageContainer) {
       return;
     }
 
     const { scrollTop, scrollHeight, clientHeight } = this.messageContainer;
     if (
       this.props.startReached ||
       Math.abs(scrollTop) + clientHeight + 55 < scrollHeight
     ) {
       return;
     }
 
     if (this.loadingFromScroll) {
       return;
     }
     this.loadingFromScroll = true;
 
     const threadID = this.props.activeChatThreadID;
     invariant(threadID, 'should be set');
 
     try {
       const { oldestMessageServerID } = this.props;
       if (oldestMessageServerID) {
         await this.props.dispatchActionPromise(
           fetchMessagesBeforeCursorActionTypes,
           this.props.fetchMessagesBeforeCursor(threadID, oldestMessageServerID),
         );
       } else {
         await this.props.dispatchActionPromise(
           fetchMostRecentMessagesActionTypes,
           this.props.fetchMostRecentMessages(threadID),
         );
       }
     } finally {
       this.loadingFromScroll = false;
     }
   }
 }
 
 registerFetchKey(fetchMessagesBeforeCursorActionTypes);
 registerFetchKey(fetchMostRecentMessagesActionTypes);
 const ConnectedChatMessageList: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedChatMessageList(
     props: BaseProps,
   ): React.Node {
     const { threadInfo } = props;
     const messageListData = useMessageListData({
       threadInfo,
       searching: false,
       userInfoInputArray: [],
     });
 
     const startReached = !!useSelector(state => {
       const activeID = threadInfo.id;
       if (!activeID) {
         return null;
       }
 
       if (threadIsPending(activeID)) {
         return true;
       }
 
       const threadMessageInfo = state.messageStore.threads[activeID];
       if (!threadMessageInfo) {
         return null;
       }
       return threadMessageInfo.startReached;
     });
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callFetchMessagesBeforeCursor = useServerCall(
       fetchMessagesBeforeCursor,
     );
     const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);
 
     const inputState = React.useContext(InputStateContext);
 
     const { clearTooltip } = useTooltipContext();
 
     const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo);
     const messageListContext = React.useMemo(() => {
       if (!getTextMessageMarkdownRules) {
         return undefined;
       }
       return { getTextMessageMarkdownRules };
     }, [getTextMessageMarkdownRules]);
 
     const oldestMessageServerID = useOldestMessageServerID(threadInfo.id);
 
-    const { editState } = useEditModalContext();
+    const {
+      editState,
+      addScrollToMessageListener,
+      removeScrollToMessageListener,
+    } = useEditModalContext();
     const isEditState = editState !== null;
 
     return (
       <MessageListContext.Provider value={messageListContext}>
         <ChatMessageList
           activeChatThreadID={threadInfo.id}
           threadInfo={threadInfo}
           messageListData={messageListData}
           startReached={startReached}
           inputState={inputState}
           dispatchActionPromise={dispatchActionPromise}
           fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
           fetchMostRecentMessages={callFetchMostRecentMessages}
           clearTooltip={clearTooltip}
           oldestMessageServerID={oldestMessageServerID}
           isEditState={isEditState}
+          addScrollToMessageListener={addScrollToMessageListener}
+          removeScrollToMessageListener={removeScrollToMessageListener}
         />
       </MessageListContext.Provider>
     );
   });
 
 export default ConnectedChatMessageList;
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
index 47094ea57..453390ae2 100644
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -1,240 +1,247 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 import {
   Circle as CircleIcon,
   CheckCircle as CheckCircleIcon,
   XCircle as XCircleIcon,
 } from 'react-feather';
 
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
 import { assertComposableMessageType } from 'lib/types/message-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 
+import { getComposedMessageID } from './chat-constants.js';
 import css from './chat-message-list.css';
 import FailedSend from './failed-send.react.js';
 import InlineEngagement from './inline-engagement.react.js';
 import UserAvatar from '../avatars/user-avatar.react.js';
 import CommIcon from '../CommIcon.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import { useMessageTooltip } from '../utils/tooltip-action-utils.js';
 import { tooltipPositions } from '../utils/tooltip-utils.js';
 
+export type ComposedMessageID = string;
+
 const availableTooltipPositionsForViewerMessage = [
   tooltipPositions.LEFT,
   tooltipPositions.LEFT_BOTTOM,
   tooltipPositions.LEFT_TOP,
   tooltipPositions.RIGHT,
   tooltipPositions.RIGHT_BOTTOM,
   tooltipPositions.RIGHT_TOP,
   tooltipPositions.BOTTOM,
   tooltipPositions.TOP,
 ];
 const availableTooltipPositionsForNonViewerMessage = [
   tooltipPositions.RIGHT,
   tooltipPositions.RIGHT_BOTTOM,
   tooltipPositions.RIGHT_TOP,
   tooltipPositions.LEFT,
   tooltipPositions.LEFT_BOTTOM,
   tooltipPositions.LEFT_TOP,
   tooltipPositions.BOTTOM,
   tooltipPositions.TOP,
 ];
 
 type BaseProps = {
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
   +shouldDisplayPinIndicator: boolean,
   +sendFailed: boolean,
   +children: React.Node,
   +fixedWidth?: boolean,
   +borderRadius: number,
 };
 type BaseConfig = React.Config<BaseProps, typeof ComposedMessage.defaultProps>;
 type Props = {
   ...BaseProps,
   // withInputState
   +inputState: ?InputState,
   +onMouseLeave: ?() => mixed,
   +onMouseEnter: (event: SyntheticEvent<HTMLDivElement>) => mixed,
   +containsInlineEngagement: boolean,
   +stringForUser: ?string,
 };
 class ComposedMessage extends React.PureComponent<Props> {
   static defaultProps: { +borderRadius: number } = {
     borderRadius: 8,
   };
 
   render(): React.Node {
     assertComposableMessageType(this.props.item.messageInfo.type);
     const { borderRadius, item, threadInfo, shouldDisplayPinIndicator } =
       this.props;
     const { hasBeenEdited, isPinned } = item;
     const { id, creator } = item.messageInfo;
     const threadColor = threadInfo.color;
 
     const { isViewer } = creator;
     const contentClassName = classNames({
       [css.content]: true,
       [css.viewerContent]: isViewer,
       [css.nonViewerContent]: !isViewer,
     });
     const messageBoxContainerClassName = classNames({
       [css.messageBoxContainer]: true,
       [css.fixedWidthMessageBoxContainer]: this.props.fixedWidth,
     });
     const messageBoxClassName = classNames({
       [css.messageBox]: true,
       [css.fixedWidthMessageBox]: this.props.fixedWidth,
     });
     const messageBoxStyle = {
       borderTopRightRadius: isViewer && !item.startsCluster ? 0 : borderRadius,
       borderBottomRightRadius: isViewer && !item.endsCluster ? 0 : borderRadius,
       borderTopLeftRadius: !isViewer && !item.startsCluster ? 0 : borderRadius,
       borderBottomLeftRadius: !isViewer && !item.endsCluster ? 0 : borderRadius,
     };
 
     let authorName = null;
     const { stringForUser } = this.props;
     if (stringForUser) {
       authorName = <span className={css.authorName}>{stringForUser}</span>;
     }
 
     let deliveryIcon = null;
     let failedSendInfo = null;
     if (isViewer) {
       let deliveryIconSpan;
       let deliveryIconColor = threadColor;
       if (id !== null && id !== undefined) {
         deliveryIconSpan = <CheckCircleIcon />;
       } else if (this.props.sendFailed) {
         deliveryIconSpan = <XCircleIcon />;
         deliveryIconColor = 'FF0000';
         failedSendInfo = <FailedSend item={item} threadInfo={threadInfo} />;
       } else {
         deliveryIconSpan = <CircleIcon />;
       }
       deliveryIcon = (
         <div
           className={css.iconContainer}
           style={{ color: `#${deliveryIconColor}` }}
         >
           {deliveryIconSpan}
         </div>
       );
     }
 
     let inlineEngagement = null;
     const label = getMessageLabel(hasBeenEdited, threadInfo);
     if (
       (this.props.containsInlineEngagement && item.threadCreatedFromMessage) ||
       Object.keys(item.reactions).length > 0 ||
       label
     ) {
       const positioning = isViewer ? 'right' : 'left';
       inlineEngagement = (
         <div className={css.sidebarMarginBottom}>
           <InlineEngagement
             threadInfo={item.threadCreatedFromMessage}
             reactions={item.reactions}
             positioning={positioning}
             label={label}
           />
         </div>
       );
     }
 
     let avatar;
     if (!isViewer && item.endsCluster) {
       avatar = (
         <div className={css.avatarContainer}>
           <UserAvatar size="small" userID={creator.id} />
         </div>
       );
     } else if (!isViewer) {
       avatar = <div className={css.avatarOffset} />;
     }
 
     const pinIconPositioning = isViewer ? 'left' : 'right';
     const pinIconName = pinIconPositioning === 'left' ? 'pin-mirror' : 'pin';
     const pinIconContainerClassName = classNames({
       [css.pinIconContainer]: true,
       [css.pinIconLeft]: pinIconPositioning === 'left',
       [css.pinIconRight]: pinIconPositioning === 'right',
     });
     let pinIcon;
     if (isPinned && shouldDisplayPinIndicator) {
       pinIcon = (
         <div
           className={pinIconContainerClassName}
           style={{ color: `#${threadColor}` }}
         >
           <CommIcon icon={pinIconName} size={12} />
         </div>
       );
     }
 
     return (
       <React.Fragment>
         {authorName}
         <div className={contentClassName}>
           {avatar}
           <div
             className={messageBoxContainerClassName}
             onMouseEnter={this.props.onMouseEnter}
             onMouseLeave={this.props.onMouseLeave}
           >
             {pinIcon}
-            <div className={messageBoxClassName} style={messageBoxStyle}>
+            <div
+              className={messageBoxClassName}
+              style={messageBoxStyle}
+              id={getComposedMessageID(item.messageInfo)}
+            >
               {this.props.children}
             </div>
           </div>
           {deliveryIcon}
         </div>
         {failedSendInfo}
         {inlineEngagement}
       </React.Fragment>
     );
   }
 }
 
 type ConnectedConfig = React.Config<
   BaseProps,
   typeof ComposedMessage.defaultProps,
 >;
 const ConnectedComposedMessage: React.ComponentType<ConnectedConfig> =
   React.memo<BaseConfig>(function ConnectedComposedMessage(props) {
     const { item, threadInfo } = props;
     const inputState = React.useContext(InputStateContext);
     const { creator } = props.item.messageInfo;
     const { isViewer } = creator;
     const availablePositions = isViewer
       ? availableTooltipPositionsForViewerMessage
       : availableTooltipPositionsForNonViewerMessage;
     const containsInlineEngagement = !!item.threadCreatedFromMessage;
 
     const { onMouseLeave, onMouseEnter } = useMessageTooltip({
       item,
       threadInfo,
       availablePositions,
     });
 
     const shouldShowUsername = !isViewer && item.startsCluster;
     const stringForUser = useStringForUser(shouldShowUsername ? creator : null);
 
     return (
       <ComposedMessage
         {...props}
         inputState={inputState}
         onMouseLeave={onMouseLeave}
         onMouseEnter={onMouseEnter}
         containsInlineEngagement={containsInlineEngagement}
         stringForUser={stringForUser}
       />
     );
   });
 
 export default ConnectedComposedMessage;
diff --git a/web/chat/edit-message-provider.js b/web/chat/edit-message-provider.js
index 6cafab783..785f738d3 100644
--- a/web/chat/edit-message-provider.js
+++ b/web/chat/edit-message-provider.js
@@ -1,168 +1,219 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import ModalOverlay from 'lib/components/modal-overlay.react.js';
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import { EditTextMessage } from './edit-text-message.react.js';
 
 export type ModalPosition = {
   +left: number,
   +top: number,
   +width: number,
   +height: number,
 };
 
 export type EditState = {
   +messageInfo: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
   +editedMessageDraft: ?string,
   +isError: boolean,
   +position?: ModalPosition,
+  +maxHeight: number,
 };
 
+export type ScrollToMessageCallback = (
+  composedMessageID: string,
+  callback: (maxHeight: number) => void,
+) => void;
+
 type EditModalContextType = {
   +renderEditModal: (params: EditState) => void,
   +clearEditModal: () => void,
   +editState: ?EditState,
   +setDraft: string => void,
   +setError: boolean => void,
   +updatePosition: ModalPosition => void,
+  +scrollToMessage: ScrollToMessageCallback,
+  +addScrollToMessageListener: ScrollToMessageCallback => void,
+  +removeScrollToMessageListener: ScrollToMessageCallback => void,
 };
 
 const EditModalContext: React.Context<EditModalContextType> =
   React.createContext<EditModalContextType>({
     renderEditModal: () => {},
     clearEditModal: () => {},
     editState: null,
     setDraft: () => {},
     setError: () => {},
     updatePosition: () => {},
+    scrollToMessage: () => {},
+    addScrollToMessageListener: () => {},
+    removeScrollToMessageListener: () => {},
   });
 
 type Props = {
   +children: React.Node,
 };
 function EditModalProvider(props: Props): React.Node {
   const { children } = props;
 
   const [editState, setEditState] = React.useState<?EditState>(null);
 
+  const [scrollToMessageCallbacks, setScrollToMessageCallbacks] =
+    React.useState<Array<ScrollToMessageCallback>>([]);
+
   const clearEditModal = React.useCallback(() => {
     setEditState(null);
   }, []);
 
   const renderEditModal = React.useCallback((newEditState: EditState): void => {
     setEditState(newEditState);
   }, []);
 
   const modal = React.useMemo(() => {
     if (!editState || !editState.position) {
       return null;
     }
 
     const tooltipNode = (
       <EditTextMessage
         item={editState.messageInfo}
         threadInfo={editState.threadInfo}
         background={false}
       />
     );
 
     const tooltipContainerStyle = {
       position: 'fixed',
       left: editState.position.left,
       top: editState.position.top,
       width: editState.position.width,
       height: editState.position.height,
     };
 
     return <div style={tooltipContainerStyle}>{tooltipNode}</div>;
   }, [editState]);
 
   const setDraft = React.useCallback(
     (draft: ?string) => {
       if (!editState) {
         return;
       }
       setEditState({
         ...editState,
         editedMessageDraft: draft,
       });
     },
     [editState, setEditState],
   );
 
   const setError = React.useCallback(
     (isError: boolean) => {
       invariant(editState, 'editState should be set in setError');
       setEditState({
         ...editState,
         isError,
       });
     },
     [editState, setEditState],
   );
 
   const updatePosition = React.useCallback(
     (position: ModalPosition) => {
       invariant(editState, 'editState should be set in updatePosition');
       setEditState({
         ...editState,
         position,
       });
     },
     [editState, setEditState],
   );
 
+  const scrollToMessage: ScrollToMessageCallback = React.useCallback(
+    (messageKey: string, callback: (maxHeight: number) => void) => {
+      scrollToMessageCallbacks.forEach((callback2: ScrollToMessageCallback) =>
+        callback2(messageKey, callback),
+      );
+    },
+    [scrollToMessageCallbacks],
+  );
+
+  const addScrollToMessageListener = React.useCallback(
+    (callback: ScrollToMessageCallback): void => {
+      setScrollToMessageCallbacks(prevScrollToMessageCallbacks => [
+        ...prevScrollToMessageCallbacks,
+        callback,
+      ]);
+    },
+    [],
+  );
+
+  const removeScrollToMessageListener = React.useCallback(
+    (callback: ScrollToMessageCallback) => {
+      setScrollToMessageCallbacks(prevScrollToMessageCallbacks =>
+        prevScrollToMessageCallbacks.filter(
+          candidate => candidate !== callback,
+        ),
+      );
+    },
+    [],
+  );
+
   const value = React.useMemo(
     () => ({
       renderEditModal,
       clearEditModal: clearEditModal,
       editState,
       setDraft,
       setError,
       updatePosition,
+      scrollToMessage,
+      addScrollToMessageListener,
+      removeScrollToMessageListener,
     }),
     [
       renderEditModal,
       clearEditModal,
       editState,
       setDraft,
       setError,
       updatePosition,
+      scrollToMessage,
+      addScrollToMessageListener,
+      removeScrollToMessageListener,
     ],
   );
 
   const modalOverlay = React.useMemo(() => {
     if (!modal) {
       return null;
     }
     return (
       <ModalOverlay
         onClose={clearEditModal}
         backgroundColor="var(--modal-overlay-background-80)"
       >
         {modal}
       </ModalOverlay>
     );
   }, [clearEditModal, modal]);
 
   return (
     <EditModalContext.Provider value={value}>
       {children}
       {modalOverlay}
     </EditModalContext.Provider>
   );
 }
 
 function useEditModalContext(): EditModalContextType {
   const context = React.useContext(EditModalContext);
   invariant(context, 'EditModalContext not found');
   return context;
 }
 
 export { EditModalProvider, useEditModalContext };
diff --git a/web/chat/edit-text-message.css b/web/chat/edit-text-message.css
index 4ab58dfbe..45a07796d 100644
--- a/web/chat/edit-text-message.css
+++ b/web/chat/edit-text-message.css
@@ -1,60 +1,62 @@
 .editMessage {
+  /* Related to editBoxHeight in the `edit-text-message` component */
   padding: 10px;
   background-color: var(--modal-bg);
   border-radius: 8px;
 }
 
 .backgroundEditMessage {
   width: 1000px;
 }
 
 .bottomRow {
+  /* Related to editBoxHeight in the `edit-text-message` component */
   padding-top: 10px;
   display: flex;
   align-items: center;
 }
 
 .buttons {
   margin-left: auto;
   margin-right: 0;
 }
 
 .icon {
   color: var(--error);
   height: 16px;
   display: flex;
   float: left;
   margin-right: 2px;
 }
 
 .failedText {
   font-size: 13px;
   white-space: nowrap;
   flex: 1;
   align-items: center;
 }
 
 .errorColor {
   color: var(--error);
 }
 
 .whiteColor {
   color: var(--fg);
   margin-left: 2px;
 }
 
 .failedText > div {
   float: left;
   margin-right: 2px;
 }
 
 .smallButton {
   padding: 3px 8px;
   border-radius: 4px;
   font-size: 12px;
   float: right;
 }
 
 .saveButton {
   margin-left: 8px;
 }
diff --git a/web/chat/edit-text-message.react.js b/web/chat/edit-text-message.react.js
index 11f3722b7..b1ddd3e78 100644
--- a/web/chat/edit-text-message.react.js
+++ b/web/chat/edit-text-message.react.js
@@ -1,193 +1,196 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 import { useCallback } from 'react';
 import { XCircle as XCircleIcon } from 'react-feather';
 
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { useEditMessage } from 'lib/shared/edit-messages-utils.js';
 import { trimMessage } from 'lib/shared/message-utils.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 
-import cssInputBar from './chat-input-bar.css';
+import { editBoxBottomRowHeight } from './chat-constants.js';
 import ChatInputTextArea from './chat-input-text-area.react.js';
 import ComposedMessage from './composed-message.react.js';
 import { useEditModalContext } from './edit-message-provider.js';
 import css from './edit-text-message.css';
 import type { ButtonColor } from '../components/button.react.js';
 import Button from '../components/button.react.js';
 
 type Props = {
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
   +background: boolean,
 };
 
 const cancelButtonColor: ButtonColor = {
   backgroundColor: 'transparent',
 };
 
+const bottomRowStyle = { height: editBoxBottomRowHeight };
+
 function EditTextMessage(props: Props): React.Node {
   const { background, threadInfo, item } = props;
   const { editState, clearEditModal, setDraft, setError, updatePosition } =
     useEditModalContext();
   const editMessage = useEditMessage();
 
   const myRef = React.useRef(null);
 
   const editedMessageDraft = editState?.editedMessageDraft ?? '';
   const threadColor = threadInfo.color;
   const saveButtonColor: ButtonColor = React.useMemo(
     () => ({
       backgroundColor: `#${threadColor}`,
     }),
     [threadColor],
   );
 
   const isMessageEmpty = React.useMemo(
     () => trimMessage(editedMessageDraft) === '',
     [editedMessageDraft],
   );
 
   const isMessageEdited = React.useMemo(() => {
     const { messageInfo } = item;
     if (!messageInfo || !messageInfo.text || !editState) {
       return false;
     }
     if (!editedMessageDraft) {
       return false;
     }
     const trimmedDraft = trimMessage(editedMessageDraft);
     return trimmedDraft !== messageInfo.text;
   }, [editState, editedMessageDraft, item]);
 
   const checkAndEdit = async () => {
     const { id: messageInfoID } = item.messageInfo;
     if (isMessageEmpty) {
       return;
     }
     if (!isMessageEdited) {
       clearEditModal();
       return;
     }
     if (!messageInfoID || !editState?.editedMessageDraft) {
       return;
     }
     try {
       await editMessage(messageInfoID, editState.editedMessageDraft);
       clearEditModal();
     } catch (e) {
       setError(true);
     }
   };
 
   const updateDimensions = useCallback(() => {
     if (!myRef.current || !background) {
       return;
     }
     const { left, top, width, height } = myRef.current.getBoundingClientRect();
     updatePosition({
       left,
       top,
       width,
       height,
     });
   }, [background, updatePosition]);
 
   const preventCloseTab = React.useCallback(
     event => {
       if (!isMessageEdited) {
         return null;
       }
       event.preventDefault();
       return (event.returnValue = '');
     },
     [isMessageEdited],
   );
 
   React.useEffect(() => {
     if (!background) {
       return undefined;
     }
     window.addEventListener('resize', updateDimensions);
     window.addEventListener('beforeunload', preventCloseTab);
     return () => {
       window.removeEventListener('resize', updateDimensions);
       window.removeEventListener('beforeunload', preventCloseTab);
     };
   }, [background, preventCloseTab, updateDimensions]);
 
   React.useEffect(() => {
     updateDimensions();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   let editFailed;
   if (editState?.isError) {
     editFailed = (
       <div className={css.failedText}>
         <XCircleIcon className={css.icon} />
         <div className={css.errorColor}>Edit failed.</div>
         <div className={css.whiteColor}>Please try again.</div>
       </div>
     );
   }
 
   const containerStyle = classNames(css.editMessage, {
     [css.backgroundEditMessage]: background,
   });
 
+  const maxTextAreaHeight = editState?.maxHeight;
+
   return (
     <div className={containerStyle} ref={myRef}>
-      <div className={cssInputBar.inputBarTextInput}>
-        <ChatInputTextArea
-          focus={!background}
-          currentText={editedMessageDraft}
-          setCurrentText={setDraft}
-          onChangePosition={updateDimensions}
-          send={checkAndEdit}
-        />
-      </div>
-      <div className={css.bottomRow}>
+      <ChatInputTextArea
+        focus={!background}
+        currentText={editedMessageDraft}
+        setCurrentText={setDraft}
+        onChangePosition={updateDimensions}
+        send={checkAndEdit}
+        maxHeight={maxTextAreaHeight}
+      />
+      <div className={css.bottomRow} style={bottomRowStyle}>
         {editFailed}
         <div className={css.buttons}>
           <Button
             className={[css.saveButton, css.smallButton]}
             variant="filled"
             buttonColor={saveButtonColor}
             onClick={checkAndEdit}
             disabled={isMessageEmpty}
           >
             Save (enter)
           </Button>
           <Button
             className={css.smallButton}
             variant="filled"
             buttonColor={cancelButtonColor}
             onClick={clearEditModal}
           >
             Cancel (esc)
           </Button>
         </div>
       </div>
     </div>
   );
 }
 
 const ComposedEditTextMessage: React.ComponentType<Props> = React.memo<Props>(
   function ComposedEditTextMessage(props) {
     const { background, ...restProps } = props;
     return (
       <ComposedMessage
         {...restProps}
         sendFailed={false}
         shouldDisplayPinIndicator={false}
       >
         <EditTextMessage {...props} />
       </ComposedMessage>
     );
   },
 );
 
 export { EditTextMessage, ComposedEditTextMessage };
diff --git a/web/components/button.css b/web/components/button.css
index 6b71c52a1..aca0283bf 100644
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -1,76 +1,81 @@
 .plain {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   background: none;
   border: none;
 }
 
+/*
+ * Changes to the height of the button component should be reflected in
+ * the `chat-constants.js`component in the `editBoxBottomRowHeight`
+ * variable as well.
+ */
 .btn {
   --border-width: 1px;
   --border-radius: 8px;
 
   position: relative;
   font-size: var(--m-font-16);
   padding: 12px 24px;
   color: var(--fg);
   border: var(--border-width) solid transparent;
   border-radius: var(--border-radius);
 }
 
 .btn.outline {
   border: var(--border-width) solid var(--btn-outline-border);
 }
 
 .btn > * {
   position: relative;
 }
 
 .btn::before {
   content: '';
   border: inherit;
   border-radius: inherit;
   background: inherit;
   position: absolute;
   top: calc(-1 * var(--border-width));
   left: calc(-1 * var(--border-width));
   width: 100%;
   height: 100%;
 }
 
 .btn.outline::before {
   top: 0;
   left: 0;
   border: none;
   border-radius: calc(var(--border-radius) - var(--border-width));
 }
 
 .btn:hover::before {
   transition-duration: 200ms;
   transition-property: filter;
 }
 
 .btn:hover:not(:disabled)::before {
   filter: brightness(0.8);
 }
 
 .btn.outline:hover:not(:disabled)::before {
   filter: brightness(2);
 }
 
 .btn:disabled {
   cursor: not-allowed;
   color: var(--btn-disabled-color);
 }
 
 .btn:not(.outline):disabled::before {
   background-color: var(--btn-bg-disabled);
 }
 
 .text {
   font-size: var(--m-font-16);
   background: transparent;
   white-space: nowrap;
 }
diff --git a/web/utils/tooltip-action-utils.js b/web/utils/tooltip-action-utils.js
index 70998f750..281f0398e 100644
--- a/web/utils/tooltip-action-utils.js
+++ b/web/utils/tooltip-action-utils.js
@@ -1,483 +1,488 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { useResettingState } from 'lib/hooks/use-resetting-state.js';
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js';
 import { createMessageReply } from 'lib/shared/message-utils.js';
 import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';
 import {
   threadHasPermission,
   useSidebarExistsOrCanBeCreated,
 } from 'lib/shared/thread-utils.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import { isComposableMessageType } from 'lib/types/message-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { longAbsoluteDate } from 'lib/utils/date-utils.js';
 
 import {
   type MessageTooltipAction,
   findTooltipPosition,
   getMessageActionTooltipStyle,
   calculateTooltipSize,
   type TooltipSize,
   type TooltipPosition,
 } from './tooltip-utils.js';
+import { getComposedMessageID } from '../chat/chat-constants.js';
 import { useEditModalContext } from '../chat/edit-message-provider.js';
 import MessageTooltip from '../chat/message-tooltip.react.js';
 import type { PositionInfo } from '../chat/position-types.js';
 import { useTooltipContext } from '../chat/tooltip-provider.js';
 import CommIcon from '../CommIcon.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import TogglePinModal from '../modals/chat/toggle-pin-modal.react.js';
 import {
   useOnClickPendingSidebar,
   useOnClickThread,
 } from '../selectors/thread-selectors.js';
 
 function useMessageTooltipSidebarAction(
   item: ChatMessageInfoItem,
   threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { threadCreatedFromMessage, messageInfo } = item;
   const { popModal } = useModalContext();
   const sidebarExists = !!threadCreatedFromMessage;
   const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated(
     threadInfo,
     item,
   );
   const openThread = useOnClickThread(threadCreatedFromMessage);
   const openPendingSidebar = useOnClickPendingSidebar(messageInfo, threadInfo);
   return React.useMemo(() => {
     if (!sidebarExistsOrCanBeCreated) {
       return null;
     }
     const buttonContent = <CommIcon icon="sidebar-filled" size={16} />;
     const onClick = (event: SyntheticEvent<HTMLElement>) => {
       popModal();
 
       if (threadCreatedFromMessage) {
         openThread(event);
       } else {
         openPendingSidebar(event);
       }
     };
     return {
       actionButtonContent: buttonContent,
       onClick,
       label: sidebarExists ? 'Go to thread' : 'Create thread',
     };
   }, [
     popModal,
     openPendingSidebar,
     openThread,
     sidebarExists,
     sidebarExistsOrCanBeCreated,
     threadCreatedFromMessage,
   ]);
 }
 
 function useMessageTooltipReplyAction(
   item: ChatMessageInfoItem,
   threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
   const { popModal } = useModalContext();
   const inputState = React.useContext(InputStateContext);
   invariant(inputState, 'inputState is required');
   const { addReply } = inputState;
   return React.useMemo(() => {
     if (
       !isComposableMessageType(item.messageInfo.type) ||
       !threadHasPermission(threadInfo, threadPermissions.VOICED)
     ) {
       return null;
     }
     const buttonContent = <CommIcon icon="reply-filled" size={18} />;
     const onClick = () => {
       popModal();
 
       if (!messageInfo.text) {
         return;
       }
       addReply(createMessageReply(messageInfo.text));
     };
     return {
       actionButtonContent: buttonContent,
       onClick,
       label: 'Reply',
     };
   }, [popModal, addReply, item.messageInfo.type, messageInfo, threadInfo]);
 }
 
 const copiedMessageDurationMs = 2000;
 function useMessageCopyAction(
   item: ChatMessageInfoItem,
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
 
   const [successful, setSuccessful] = useResettingState(
     false,
     copiedMessageDurationMs,
   );
 
   return React.useMemo(() => {
     if (messageInfo.type !== messageTypes.TEXT) {
       return null;
     }
     const buttonContent = <CommIcon icon="copy-filled" size={18} />;
     const onClick = async () => {
       try {
         await navigator.clipboard.writeText(messageInfo.text);
         setSuccessful(true);
       } catch (e) {
         setSuccessful(false);
       }
     };
     return {
       actionButtonContent: buttonContent,
       onClick,
       label: successful ? 'Copied!' : 'Copy',
     };
   }, [messageInfo.text, messageInfo.type, setSuccessful, successful]);
 }
 
 function useMessageReactAction(
   item: ChatMessageInfoItem,
   threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
 
   const { setShouldRenderEmojiKeyboard } = useTooltipContext();
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
     messageInfo,
   );
 
   return React.useMemo(() => {
     if (!canCreateReactionFromMessage) {
       return null;
     }
 
     const buttonContent = <CommIcon icon="emote-smile-filled" size={18} />;
 
     const onClickReact = () => {
       if (!setShouldRenderEmojiKeyboard) {
         return;
       }
       setShouldRenderEmojiKeyboard(true);
     };
 
     return {
       actionButtonContent: buttonContent,
       onClick: onClickReact,
       label: 'React',
     };
   }, [canCreateReactionFromMessage, setShouldRenderEmojiKeyboard]);
 }
 
 function useMessageTogglePinAction(
   item: ChatMessageInfoItem,
   threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { pushModal } = useModalContext();
   const { messageInfo, isPinned } = item;
 
   const canTogglePin =
     isComposableMessageType(messageInfo.type) &&
     threadHasPermission(threadInfo, threadPermissions.MANAGE_PINS);
 
   const inputState = React.useContext(InputStateContext);
 
   return React.useMemo(() => {
     if (!canTogglePin) {
       return null;
     }
 
     const iconName = isPinned ? 'unpin' : 'pin';
 
     const buttonContent = <CommIcon icon={iconName} size={18} />;
 
     const onClickTogglePin = () => {
       pushModal(
         <InputStateContext.Provider value={inputState}>
           <TogglePinModal item={item} threadInfo={threadInfo} />
         </InputStateContext.Provider>,
       );
     };
 
     return {
       actionButtonContent: buttonContent,
       onClick: onClickTogglePin,
       label: isPinned ? 'Unpin' : 'Pin',
     };
   }, [canTogglePin, inputState, isPinned, pushModal, item, threadInfo]);
 }
 
 function useMessageEditAction(
   item: ChatMessageInfoItem,
   threadInfo: ThreadInfo,
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
 
   const canEditMessage = useCanEditMessage(threadInfo, messageInfo);
-  const { renderEditModal } = useEditModalContext();
+  const { renderEditModal, scrollToMessage } = useEditModalContext();
   const { clearTooltip } = useTooltipContext();
 
   return React.useMemo(() => {
     if (!canEditMessage) {
       return null;
     }
     const buttonContent = <CommIcon icon="edit-filled" size={18} />;
     const onClickEdit = () => {
+      const callback = (maxHeight: number) =>
+        renderEditModal({
+          messageInfo: item,
+          threadInfo,
+          isError: false,
+          editedMessageDraft: messageInfo.text,
+          maxHeight: maxHeight,
+        });
       clearTooltip();
-      renderEditModal({
-        messageInfo: item,
-        threadInfo,
-        isError: false,
-        editedMessageDraft: messageInfo.text,
-      });
+      scrollToMessage(getComposedMessageID(messageInfo), callback);
     };
     return {
       actionButtonContent: buttonContent,
       onClick: onClickEdit,
       label: 'Edit',
     };
   }, [
     canEditMessage,
     clearTooltip,
     item,
-    messageInfo.text,
+    messageInfo,
     renderEditModal,
+    scrollToMessage,
     threadInfo,
   ]);
 }
 
 function useMessageTooltipActions(
   item: ChatMessageInfoItem,
   threadInfo: ThreadInfo,
 ): $ReadOnlyArray<MessageTooltipAction> {
   const sidebarAction = useMessageTooltipSidebarAction(item, threadInfo);
   const replyAction = useMessageTooltipReplyAction(item, threadInfo);
   const copyAction = useMessageCopyAction(item);
   const reactAction = useMessageReactAction(item, threadInfo);
   const togglePinAction = useMessageTogglePinAction(item, threadInfo);
   const editAction = useMessageEditAction(item, threadInfo);
   return React.useMemo(
     () =>
       [
         replyAction,
         sidebarAction,
         copyAction,
         reactAction,
         togglePinAction,
         editAction,
       ].filter(Boolean),
     [
       replyAction,
       sidebarAction,
       copyAction,
       reactAction,
       togglePinAction,
       editAction,
     ],
   );
 }
 
 type UseMessageTooltipArgs = {
   +availablePositions: $ReadOnlyArray<TooltipPosition>,
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
 
 type UseMessageTooltipResult = {
   onMouseEnter: (event: SyntheticEvent<HTMLElement>) => void,
   onMouseLeave: ?() => mixed,
 };
 
 type CreateTooltipParams = {
   +tooltipMessagePosition: ?PositionInfo,
   +tooltipSize: TooltipSize,
   +availablePositions: $ReadOnlyArray<TooltipPosition>,
   +containsInlineEngagement: boolean,
   +tooltipActions: $ReadOnlyArray<MessageTooltipAction>,
   +messageTimestamp: string,
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
 
 function createTooltip(params: CreateTooltipParams) {
   const {
     tooltipMessagePosition,
     tooltipSize,
     availablePositions,
     containsInlineEngagement,
     tooltipActions,
     messageTimestamp,
     item,
     threadInfo,
   } = params;
   if (!tooltipMessagePosition) {
     return undefined;
   }
   const tooltipPosition = findTooltipPosition({
     sourcePositionInfo: tooltipMessagePosition,
     tooltipSize,
     availablePositions,
     defaultPosition: availablePositions[0],
     preventDisplayingBelowSource: containsInlineEngagement,
   });
   if (!tooltipPosition) {
     return undefined;
   }
 
   const tooltipPositionStyle = getMessageActionTooltipStyle({
     tooltipPosition,
     sourcePositionInfo: tooltipMessagePosition,
     tooltipSize,
   });
 
   const tooltip = (
     <MessageTooltip
       actions={tooltipActions}
       messageTimestamp={messageTimestamp}
       tooltipPositionStyle={tooltipPositionStyle}
       tooltipSize={tooltipSize}
       item={item}
       threadInfo={threadInfo}
     />
   );
   return { tooltip, tooltipPositionStyle };
 }
 
 function useMessageTooltip({
   availablePositions,
   item,
   threadInfo,
 }: UseMessageTooltipArgs): UseMessageTooltipResult {
   const [onMouseLeave, setOnMouseLeave] = React.useState<?() => mixed>(null);
 
   const { renderTooltip } = useTooltipContext();
   const tooltipActions = useMessageTooltipActions(item, threadInfo);
 
   const containsInlineEngagement = !!item.threadCreatedFromMessage;
 
   const messageTimestamp = React.useMemo(() => {
     const time = item.messageInfo.time;
     return longAbsoluteDate(time);
   }, [item.messageInfo.time]);
 
   const tooltipSize = React.useMemo(() => {
     if (typeof document === 'undefined') {
       return {
         width: 0,
         height: 0,
       };
     }
     const tooltipLabels = tooltipActions.map(action => action.label);
     return calculateTooltipSize({
       tooltipLabels,
       timestamp: messageTimestamp,
     });
   }, [messageTimestamp, tooltipActions]);
 
   const updateTooltip = React.useRef();
   const [tooltipMessagePosition, setTooltipMessagePosition] = React.useState();
 
   const onMouseEnter = React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       if (!renderTooltip) {
         return;
       }
       const rect = event.currentTarget.getBoundingClientRect();
       const { top, bottom, left, right, height, width } = rect;
       const messagePosition = { top, bottom, left, right, height, width };
       setTooltipMessagePosition(messagePosition);
 
       const tooltipResult = createTooltip({
         tooltipMessagePosition,
         tooltipSize,
         availablePositions,
         containsInlineEngagement,
         tooltipActions,
         messageTimestamp,
         item,
         threadInfo,
       });
       if (!tooltipResult) {
         return;
       }
 
       const { tooltip, tooltipPositionStyle } = tooltipResult;
       const renderTooltipResult = renderTooltip({
         newNode: tooltip,
         tooltipPositionStyle,
       });
       if (renderTooltipResult) {
         const { onMouseLeaveCallback: callback } = renderTooltipResult;
         setOnMouseLeave((() => callback: () => () => mixed));
         updateTooltip.current = renderTooltipResult.updateTooltip;
       }
     },
     [
       availablePositions,
       containsInlineEngagement,
       item,
       messageTimestamp,
       renderTooltip,
       threadInfo,
       tooltipActions,
       tooltipMessagePosition,
       tooltipSize,
     ],
   );
 
   React.useEffect(() => {
     if (!updateTooltip.current) {
       return;
     }
 
     const tooltipResult = createTooltip({
       tooltipMessagePosition,
       tooltipSize,
       availablePositions,
       containsInlineEngagement,
       tooltipActions,
       messageTimestamp,
       item,
       threadInfo,
     });
     if (!tooltipResult) {
       return;
     }
 
     updateTooltip.current?.(tooltipResult.tooltip);
   }, [
     availablePositions,
     containsInlineEngagement,
     item,
     messageTimestamp,
     threadInfo,
     tooltipActions,
     tooltipMessagePosition,
     tooltipSize,
   ]);
 
   return {
     onMouseEnter,
     onMouseLeave,
   };
 }
 
 export {
   useMessageTooltipSidebarAction,
   useMessageTooltipReplyAction,
   useMessageReactAction,
   useMessageTooltipActions,
   useMessageTooltip,
 };