diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx
index b2d25c43..78ba0ff9 100755
--- a/src/components/views/All.jsx
+++ b/src/components/views/All.jsx
@@ -1214,7 +1214,56 @@ const All = () => {
                                 thread.content?.length > 1000 ? (
                                   <Fragment key={`fragment5-${index}`}>
                                     <blockquote key={`bq-${index}`}>
-                                      <Post content={thread.content?.slice(0, 1000)} key={`post-${index}`} />
+                                      <Post
+                                        key={`post-${thread.cid}`}
+                                        content={thread.content?.slice(0, 1000)}
+                                        postQuoteRef={(quoteShortParentCid, ref) => {
+                                          postRefs.current[quoteShortParentCid] = ref;
+                                        }}
+                                        postQuoteOnClick={(quoteShortParentCid) => {
+                                          handleQuoteClick(thread, quoteShortParentCid, null);
+                                        }}
+                                        postQuoteOnOver={(quoteShortParentCid) => {
+                                          const quoteParentCid = cidTracker[quoteShortParentCid];
+                                          if (outOfViewCid !== quoteParentCid) {
+                                            handleQuoteHover(thread, quoteShortParentCid, () => {
+                                              setOutOfViewCid(quoteParentCid);
+
+                                              const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                              const distanceToRight = window.innerWidth - rect.right;
+                                              const distanceToTop = rect.top;
+                                              const distanceToBottom = window.innerHeight - rect.bottom;
+                                              let top;
+
+                                              if (distanceToTop < postOnHoverHeight / 2) {
+                                                top = window.scrollY - 5;
+                                              } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                                top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                              } else {
+                                                top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                              }
+
+                                              if (distanceToRight < 200) {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  right: window.innerWidth - rect.left - 10,
+                                                  maxWidth: rect.left - 5,
+                                                });
+                                              } else {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  left: rect.left + rect.width + 5,
+                                                  maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                                });
+                                              }
+                                            });
+                                          }
+                                        }}
+                                        postQuoteOnLeave={() => {
+                                          removeHighlight();
+                                          setOutOfViewCid(null);
+                                        }}
+                                      />
                                       <span key={`ttl-s-${index}`} className='ttl'>
                                         {' '}
                                         (...)
@@ -1237,7 +1286,56 @@ const All = () => {
                                   </Fragment>
                                 ) : (
                                   <blockquote key={`bq-${index}`}>
-                                    <Post content={thread.content} key={`post-${index}`} />
+                                    <Post
+                                      key={`post-${thread.cid}`}
+                                      content={thread.content}
+                                      postQuoteRef={(quoteShortParentCid, ref) => {
+                                        postRefs.current[quoteShortParentCid] = ref;
+                                      }}
+                                      postQuoteOnClick={(quoteShortParentCid) => {
+                                        handleQuoteClick(thread, quoteShortParentCid, null);
+                                      }}
+                                      postQuoteOnOver={(quoteShortParentCid) => {
+                                        const quoteParentCid = cidTracker[quoteShortParentCid];
+                                        if (outOfViewCid !== quoteParentCid) {
+                                          handleQuoteHover(thread, quoteShortParentCid, () => {
+                                            setOutOfViewCid(quoteParentCid);
+
+                                            const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                            const distanceToRight = window.innerWidth - rect.right;
+                                            const distanceToTop = rect.top;
+                                            const distanceToBottom = window.innerHeight - rect.bottom;
+                                            let top;
+
+                                            if (distanceToTop < postOnHoverHeight / 2) {
+                                              top = window.scrollY - 5;
+                                            } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                              top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                            } else {
+                                              top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                            }
+
+                                            if (distanceToRight < 200) {
+                                              setOutOfViewPosition({
+                                                top,
+                                                right: window.innerWidth - rect.left - 10,
+                                                maxWidth: rect.left - 5,
+                                              });
+                                            } else {
+                                              setOutOfViewPosition({
+                                                top,
+                                                left: rect.left + rect.width + 5,
+                                                maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                              });
+                                            }
+                                          });
+                                        }
+                                      }}
+                                      postQuoteOnLeave={() => {
+                                        removeHighlight();
+                                        setOutOfViewCid(null);
+                                      }}
+                                    />
                                     <EditLabel key={`edit-label-thread-${index}`} commentCid={thread.cid} className='ttl' />
                                     <StateLabel key={`state-label-thread-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
                                   </blockquote>
@@ -2431,7 +2529,56 @@ const All = () => {
                               thread.content?.length > 500 ? (
                                 <Fragment key={`fragment12-${index}`}>
                                   <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
-                                    <Post content={thread.content?.slice(0, 500)} key={`post-mobile-${index}`} />
+                                    <Post
+                                      key={`post-mobile-${thread.cid}`}
+                                      content={thread.content?.slice(0, 500)}
+                                      postQuoteRef={(quoteShortParentCid, ref) => {
+                                        postRefs.current[quoteShortParentCid] = ref;
+                                      }}
+                                      postQuoteOnClick={(quoteShortParentCid) => {
+                                        handleQuoteClick(thread, quoteShortParentCid, null);
+                                      }}
+                                      postQuoteOnOver={(quoteShortParentCid) => {
+                                        const quoteParentCid = cidTracker[quoteShortParentCid];
+                                        if (outOfViewCid !== quoteParentCid) {
+                                          handleQuoteHover(thread, quoteShortParentCid, () => {
+                                            setOutOfViewCid(quoteParentCid);
+
+                                            const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                            const distanceToRight = window.innerWidth - rect.right;
+                                            const distanceToTop = rect.top;
+                                            const distanceToBottom = window.innerHeight - rect.bottom;
+                                            let top;
+
+                                            if (distanceToTop < postOnHoverHeight / 2) {
+                                              top = window.scrollY - 5;
+                                            } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                              top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                            } else {
+                                              top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                            }
+
+                                            if (distanceToRight < 200) {
+                                              setOutOfViewPosition({
+                                                top,
+                                                right: window.innerWidth - rect.left - 10,
+                                                maxWidth: rect.left - 5,
+                                              });
+                                            } else {
+                                              setOutOfViewPosition({
+                                                top,
+                                                left: rect.left + rect.width + 5,
+                                                maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                              });
+                                            }
+                                          });
+                                        }
+                                      }}
+                                      postQuoteOnLeave={() => {
+                                        removeHighlight();
+                                        setOutOfViewCid(null);
+                                      }}
+                                    />
                                     <span key={`mob-ttl-s-${index}`} className='ttl'>
                                       {' '}
                                       (...)
@@ -2454,7 +2601,56 @@ const All = () => {
                                 </Fragment>
                               ) : (
                                 <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
-                                  <Post content={thread.content} key={`post-mobile-${index}`} />
+                                  <Post
+                                    key={`post-mobile-${thread.cid}`}
+                                    content={thread.content}
+                                    postQuoteRef={(quoteShortParentCid, ref) => {
+                                      postRefs.current[quoteShortParentCid] = ref;
+                                    }}
+                                    postQuoteOnClick={(quoteShortParentCid) => {
+                                      handleQuoteClick(thread, quoteShortParentCid, null);
+                                    }}
+                                    postQuoteOnOver={(quoteShortParentCid) => {
+                                      const quoteParentCid = cidTracker[quoteShortParentCid];
+                                      if (outOfViewCid !== quoteParentCid) {
+                                        handleQuoteHover(thread, quoteShortParentCid, () => {
+                                          setOutOfViewCid(quoteParentCid);
+
+                                          const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                          const distanceToRight = window.innerWidth - rect.right;
+                                          const distanceToTop = rect.top;
+                                          const distanceToBottom = window.innerHeight - rect.bottom;
+                                          let top;
+
+                                          if (distanceToTop < postOnHoverHeight / 2) {
+                                            top = window.scrollY - 5;
+                                          } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                            top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                          } else {
+                                            top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                          }
+
+                                          if (distanceToRight < 200) {
+                                            setOutOfViewPosition({
+                                              top,
+                                              right: window.innerWidth - rect.left - 10,
+                                              maxWidth: rect.left - 5,
+                                            });
+                                          } else {
+                                            setOutOfViewPosition({
+                                              top,
+                                              left: rect.left + rect.width + 5,
+                                              maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                            });
+                                          }
+                                        });
+                                      }
+                                    }}
+                                    postQuoteOnLeave={() => {
+                                      removeHighlight();
+                                      setOutOfViewCid(null);
+                                    }}
+                                  />
                                   <EditLabel key={`edit-label-thread-mob-${index}`} commentCid={thread.cid} className='ttl' />
                                   <StateLabel key={`state-label-thread-mob-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
                                 </blockquote>
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 554b126f..795e8767 100755
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -2247,7 +2247,56 @@ const Board = () => {
                                   thread.content?.length > 1000 ? (
                                     <Fragment key={`fragment5-${index}`}>
                                       <blockquote key={`bq-${index}`}>
-                                        <Post content={thread.content?.slice(0, 1000)} key={`post-${index}`} />
+                                        <Post
+                                          key={`post-${thread.cid}`}
+                                          content={thread.content?.slice(0, 1000)}
+                                          postQuoteRef={(quoteShortParentCid, ref) => {
+                                            postRefs.current[quoteShortParentCid] = ref;
+                                          }}
+                                          postQuoteOnClick={(quoteShortParentCid) => {
+                                            handleQuoteClick(thread, quoteShortParentCid, null);
+                                          }}
+                                          postQuoteOnOver={(quoteShortParentCid) => {
+                                            const quoteParentCid = cidTracker[quoteShortParentCid];
+                                            if (outOfViewCid !== quoteParentCid) {
+                                              handleQuoteHover(thread, quoteShortParentCid, () => {
+                                                setOutOfViewCid(quoteParentCid);
+
+                                                const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                                const distanceToRight = window.innerWidth - rect.right;
+                                                const distanceToTop = rect.top;
+                                                const distanceToBottom = window.innerHeight - rect.bottom;
+                                                let top;
+
+                                                if (distanceToTop < postOnHoverHeight / 2) {
+                                                  top = window.scrollY - 5;
+                                                } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                                  top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                                } else {
+                                                  top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                                }
+
+                                                if (distanceToRight < 200) {
+                                                  setOutOfViewPosition({
+                                                    top,
+                                                    right: window.innerWidth - rect.left - 10,
+                                                    maxWidth: rect.left - 5,
+                                                  });
+                                                } else {
+                                                  setOutOfViewPosition({
+                                                    top,
+                                                    left: rect.left + rect.width + 5,
+                                                    maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                                  });
+                                                }
+                                              });
+                                            }
+                                          }}
+                                          postQuoteOnLeave={() => {
+                                            removeHighlight();
+                                            setOutOfViewCid(null);
+                                          }}
+                                        />
                                         <span key={`ttl-s-${index}`} className='ttl'>
                                           {' '}
                                           (...)
@@ -2270,7 +2319,56 @@ const Board = () => {
                                     </Fragment>
                                   ) : (
                                     <blockquote key={`bq-${index}`}>
-                                      <Post content={thread.content} key={`post-${index}`} />
+                                      <Post
+                                        key={`post-${thread.cid}`}
+                                        content={thread.content}
+                                        postQuoteRef={(quoteShortParentCid, ref) => {
+                                          postRefs.current[quoteShortParentCid] = ref;
+                                        }}
+                                        postQuoteOnClick={(quoteShortParentCid) => {
+                                          handleQuoteClick(thread, quoteShortParentCid, null);
+                                        }}
+                                        postQuoteOnOver={(quoteShortParentCid) => {
+                                          const quoteParentCid = cidTracker[quoteShortParentCid];
+                                          if (outOfViewCid !== quoteParentCid) {
+                                            handleQuoteHover(thread, quoteShortParentCid, () => {
+                                              setOutOfViewCid(quoteParentCid);
+
+                                              const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                              const distanceToRight = window.innerWidth - rect.right;
+                                              const distanceToTop = rect.top;
+                                              const distanceToBottom = window.innerHeight - rect.bottom;
+                                              let top;
+
+                                              if (distanceToTop < postOnHoverHeight / 2) {
+                                                top = window.scrollY - 5;
+                                              } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                                top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                              } else {
+                                                top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                              }
+
+                                              if (distanceToRight < 200) {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  right: window.innerWidth - rect.left - 10,
+                                                  maxWidth: rect.left - 5,
+                                                });
+                                              } else {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  left: rect.left + rect.width + 5,
+                                                  maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                                });
+                                              }
+                                            });
+                                          }
+                                        }}
+                                        postQuoteOnLeave={() => {
+                                          removeHighlight();
+                                          setOutOfViewCid(null);
+                                        }}
+                                      />
                                       <EditLabel key={`edit-label-thread-${index}`} commentCid={thread.cid} className='ttl' />
                                       <StateLabel key={`state-label-thread-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
                                     </blockquote>
@@ -3488,7 +3586,56 @@ const Board = () => {
                                 thread.content?.length > 500 ? (
                                   <Fragment key={`fragment12-${index}`}>
                                     <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
-                                      <Post content={thread.content?.slice(0, 500)} key={`post-mobile-${index}`} />
+                                      <Post
+                                        key={`post-mobile-${thread.cid}`}
+                                        content={thread.content?.slice(0, 500)}
+                                        postQuoteRef={(quoteShortParentCid, ref) => {
+                                          postRefs.current[quoteShortParentCid] = ref;
+                                        }}
+                                        postQuoteOnClick={(quoteShortParentCid) => {
+                                          handleQuoteClick(thread, quoteShortParentCid, null);
+                                        }}
+                                        postQuoteOnOver={(quoteShortParentCid) => {
+                                          const quoteParentCid = cidTracker[quoteShortParentCid];
+                                          if (outOfViewCid !== quoteParentCid) {
+                                            handleQuoteHover(thread, quoteShortParentCid, () => {
+                                              setOutOfViewCid(quoteParentCid);
+
+                                              const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                              const distanceToRight = window.innerWidth - rect.right;
+                                              const distanceToTop = rect.top;
+                                              const distanceToBottom = window.innerHeight - rect.bottom;
+                                              let top;
+
+                                              if (distanceToTop < postOnHoverHeight / 2) {
+                                                top = window.scrollY - 5;
+                                              } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                                top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                              } else {
+                                                top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                              }
+
+                                              if (distanceToRight < 200) {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  right: window.innerWidth - rect.left - 10,
+                                                  maxWidth: rect.left - 5,
+                                                });
+                                              } else {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  left: rect.left + rect.width + 5,
+                                                  maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                                });
+                                              }
+                                            });
+                                          }
+                                        }}
+                                        postQuoteOnLeave={() => {
+                                          removeHighlight();
+                                          setOutOfViewCid(null);
+                                        }}
+                                      />
                                       <span key={`mob-ttl-s-${index}`} className='ttl'>
                                         {' '}
                                         (...)
@@ -3511,7 +3658,56 @@ const Board = () => {
                                   </Fragment>
                                 ) : (
                                   <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
-                                    <Post content={thread.content} key={`post-mobile-${index}`} />
+                                    <Post
+                                      key={`post-mobile-${thread.cid}`}
+                                      content={thread.content?.slice(0, 1000)}
+                                      postQuoteRef={(quoteShortParentCid, ref) => {
+                                        postRefs.current[quoteShortParentCid] = ref;
+                                      }}
+                                      postQuoteOnClick={(quoteShortParentCid) => {
+                                        handleQuoteClick(thread, quoteShortParentCid, null);
+                                      }}
+                                      postQuoteOnOver={(quoteShortParentCid) => {
+                                        const quoteParentCid = cidTracker[quoteShortParentCid];
+                                        if (outOfViewCid !== quoteParentCid) {
+                                          handleQuoteHover(thread, quoteShortParentCid, () => {
+                                            setOutOfViewCid(quoteParentCid);
+
+                                            const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                            const distanceToRight = window.innerWidth - rect.right;
+                                            const distanceToTop = rect.top;
+                                            const distanceToBottom = window.innerHeight - rect.bottom;
+                                            let top;
+
+                                            if (distanceToTop < postOnHoverHeight / 2) {
+                                              top = window.scrollY - 5;
+                                            } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                              top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                            } else {
+                                              top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                            }
+
+                                            if (distanceToRight < 200) {
+                                              setOutOfViewPosition({
+                                                top,
+                                                right: window.innerWidth - rect.left - 10,
+                                                maxWidth: rect.left - 5,
+                                              });
+                                            } else {
+                                              setOutOfViewPosition({
+                                                top,
+                                                left: rect.left + rect.width + 5,
+                                                maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                              });
+                                            }
+                                          });
+                                        }
+                                      }}
+                                      postQuoteOnLeave={() => {
+                                        removeHighlight();
+                                        setOutOfViewCid(null);
+                                      }}
+                                    />
                                     <EditLabel key={`edit-label-thread-mob-${index}`} commentCid={thread.cid} className='ttl' />
                                     <StateLabel key={`state-label-thread-mob-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
                                   </blockquote>
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx
index 7e526d5d..3f68eabc 100755
--- a/src/components/views/Subscriptions.jsx
+++ b/src/components/views/Subscriptions.jsx
@@ -1224,7 +1224,56 @@ const Subscriptions = () => {
                                 thread.content?.length > 1000 ? (
                                   <Fragment key={`fragment5-${index}`}>
                                     <blockquote key={`bq-${index}`}>
-                                      <Post content={thread.content?.slice(0, 1000)} key={`post-${index}`} />
+                                      <Post
+                                        key={`post-${thread.cid}`}
+                                        content={thread.content?.slice(0, 1000)}
+                                        postQuoteRef={(quoteShortParentCid, ref) => {
+                                          postRefs.current[quoteShortParentCid] = ref;
+                                        }}
+                                        postQuoteOnClick={(quoteShortParentCid) => {
+                                          handleQuoteClick(thread, quoteShortParentCid, null);
+                                        }}
+                                        postQuoteOnOver={(quoteShortParentCid) => {
+                                          const quoteParentCid = cidTracker[quoteShortParentCid];
+                                          if (outOfViewCid !== quoteParentCid) {
+                                            handleQuoteHover(thread, quoteShortParentCid, () => {
+                                              setOutOfViewCid(quoteParentCid);
+
+                                              const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                              const distanceToRight = window.innerWidth - rect.right;
+                                              const distanceToTop = rect.top;
+                                              const distanceToBottom = window.innerHeight - rect.bottom;
+                                              let top;
+
+                                              if (distanceToTop < postOnHoverHeight / 2) {
+                                                top = window.scrollY - 5;
+                                              } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                                top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                              } else {
+                                                top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                              }
+
+                                              if (distanceToRight < 200) {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  right: window.innerWidth - rect.left - 10,
+                                                  maxWidth: rect.left - 5,
+                                                });
+                                              } else {
+                                                setOutOfViewPosition({
+                                                  top,
+                                                  left: rect.left + rect.width + 5,
+                                                  maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                                });
+                                              }
+                                            });
+                                          }
+                                        }}
+                                        postQuoteOnLeave={() => {
+                                          removeHighlight();
+                                          setOutOfViewCid(null);
+                                        }}
+                                      />
                                       <span key={`ttl-s-${index}`} className='ttl'>
                                         {' '}
                                         (...)
@@ -1247,7 +1296,56 @@ const Subscriptions = () => {
                                   </Fragment>
                                 ) : (
                                   <blockquote key={`bq-${index}`}>
-                                    <Post content={thread.content} key={`post-${index}`} />
+                                    <Post
+                                      key={`post-${thread.cid}`}
+                                      content={thread.content}
+                                      postQuoteRef={(quoteShortParentCid, ref) => {
+                                        postRefs.current[quoteShortParentCid] = ref;
+                                      }}
+                                      postQuoteOnClick={(quoteShortParentCid) => {
+                                        handleQuoteClick(thread, quoteShortParentCid, null);
+                                      }}
+                                      postQuoteOnOver={(quoteShortParentCid) => {
+                                        const quoteParentCid = cidTracker[quoteShortParentCid];
+                                        if (outOfViewCid !== quoteParentCid) {
+                                          handleQuoteHover(thread, quoteShortParentCid, () => {
+                                            setOutOfViewCid(quoteParentCid);
+
+                                            const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                            const distanceToRight = window.innerWidth - rect.right;
+                                            const distanceToTop = rect.top;
+                                            const distanceToBottom = window.innerHeight - rect.bottom;
+                                            let top;
+
+                                            if (distanceToTop < postOnHoverHeight / 2) {
+                                              top = window.scrollY - 5;
+                                            } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                              top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                            } else {
+                                              top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                            }
+
+                                            if (distanceToRight < 200) {
+                                              setOutOfViewPosition({
+                                                top,
+                                                right: window.innerWidth - rect.left - 10,
+                                                maxWidth: rect.left - 5,
+                                              });
+                                            } else {
+                                              setOutOfViewPosition({
+                                                top,
+                                                left: rect.left + rect.width + 5,
+                                                maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                              });
+                                            }
+                                          });
+                                        }
+                                      }}
+                                      postQuoteOnLeave={() => {
+                                        removeHighlight();
+                                        setOutOfViewCid(null);
+                                      }}
+                                    />
                                     <EditLabel key={`edit-label-thread-${index}`} commentCid={thread.cid} className='ttl' />
                                     <StateLabel key={`state-label-thread-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
                                   </blockquote>
@@ -2441,7 +2539,56 @@ const Subscriptions = () => {
                               thread.content?.length > 500 ? (
                                 <Fragment key={`fragment12-${index}`}>
                                   <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
-                                    <Post content={thread.content?.slice(0, 500)} key={`post-mobile-${index}`} />
+                                    <Post
+                                      key={`post-mobile-${thread.cid}`}
+                                      content={thread.content?.slice(0, 500)}
+                                      postQuoteRef={(quoteShortParentCid, ref) => {
+                                        postRefs.current[quoteShortParentCid] = ref;
+                                      }}
+                                      postQuoteOnClick={(quoteShortParentCid) => {
+                                        handleQuoteClick(thread, quoteShortParentCid, null);
+                                      }}
+                                      postQuoteOnOver={(quoteShortParentCid) => {
+                                        const quoteParentCid = cidTracker[quoteShortParentCid];
+                                        if (outOfViewCid !== quoteParentCid) {
+                                          handleQuoteHover(thread, quoteShortParentCid, () => {
+                                            setOutOfViewCid(quoteParentCid);
+
+                                            const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                            const distanceToRight = window.innerWidth - rect.right;
+                                            const distanceToTop = rect.top;
+                                            const distanceToBottom = window.innerHeight - rect.bottom;
+                                            let top;
+
+                                            if (distanceToTop < postOnHoverHeight / 2) {
+                                              top = window.scrollY - 5;
+                                            } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                              top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                            } else {
+                                              top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                            }
+
+                                            if (distanceToRight < 200) {
+                                              setOutOfViewPosition({
+                                                top,
+                                                right: window.innerWidth - rect.left - 10,
+                                                maxWidth: rect.left - 5,
+                                              });
+                                            } else {
+                                              setOutOfViewPosition({
+                                                top,
+                                                left: rect.left + rect.width + 5,
+                                                maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                              });
+                                            }
+                                          });
+                                        }
+                                      }}
+                                      postQuoteOnLeave={() => {
+                                        removeHighlight();
+                                        setOutOfViewCid(null);
+                                      }}
+                                    />
                                     <span key={`mob-ttl-s-${index}`} className='ttl'>
                                       {' '}
                                       (...)
@@ -2464,7 +2611,56 @@ const Subscriptions = () => {
                                 </Fragment>
                               ) : (
                                 <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
-                                  <Post content={thread.content} key={`post-mobile-${index}`} />
+                                  <Post
+                                    key={`post-mobile-${thread.cid}`}
+                                    content={thread.content}
+                                    postQuoteRef={(quoteShortParentCid, ref) => {
+                                      postRefs.current[quoteShortParentCid] = ref;
+                                    }}
+                                    postQuoteOnClick={(quoteShortParentCid) => {
+                                      handleQuoteClick(thread, quoteShortParentCid, null);
+                                    }}
+                                    postQuoteOnOver={(quoteShortParentCid) => {
+                                      const quoteParentCid = cidTracker[quoteShortParentCid];
+                                      if (outOfViewCid !== quoteParentCid) {
+                                        handleQuoteHover(thread, quoteShortParentCid, () => {
+                                          setOutOfViewCid(quoteParentCid);
+
+                                          const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                          const distanceToRight = window.innerWidth - rect.right;
+                                          const distanceToTop = rect.top;
+                                          const distanceToBottom = window.innerHeight - rect.bottom;
+                                          let top;
+
+                                          if (distanceToTop < postOnHoverHeight / 2) {
+                                            top = window.scrollY - 5;
+                                          } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                            top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                          } else {
+                                            top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                          }
+
+                                          if (distanceToRight < 200) {
+                                            setOutOfViewPosition({
+                                              top,
+                                              right: window.innerWidth - rect.left - 10,
+                                              maxWidth: rect.left - 5,
+                                            });
+                                          } else {
+                                            setOutOfViewPosition({
+                                              top,
+                                              left: rect.left + rect.width + 5,
+                                              maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                            });
+                                          }
+                                        });
+                                      }
+                                    }}
+                                    postQuoteOnLeave={() => {
+                                      removeHighlight();
+                                      setOutOfViewCid(null);
+                                    }}
+                                  />
                                   <EditLabel key={`edit-label-thread-mob-${index}`} commentCid={thread.cid} className='ttl' />
                                   <StateLabel key={`state-label-thread-mob-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
                                 </blockquote>
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index 87e51a1a..2be47cfa 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -1376,7 +1376,56 @@ const Thread = () => {
                           </div>
                         </span>
                         <blockquote key={`blockquote-${comment.cid}`}>
-                          <Post content={comment.content} comment={comment} key={`post-${comment.cid}`} />
+                          <Post
+                            key={`post-${comment.cid}`}
+                            content={comment.content}
+                            postQuoteRef={(quoteShortParentCid, ref) => {
+                              postRefs.current[quoteShortParentCid] = ref;
+                            }}
+                            postQuoteOnClick={(quoteShortParentCid) => {
+                              handleQuoteClick(comment, quoteShortParentCid, null);
+                            }}
+                            postQuoteOnOver={(quoteShortParentCid) => {
+                              const quoteParentCid = cidTracker[quoteShortParentCid];
+                              if (outOfViewCid !== quoteParentCid) {
+                                handleQuoteHover(comment, quoteShortParentCid, () => {
+                                  setOutOfViewCid(quoteParentCid);
+
+                                  const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                  const distanceToRight = window.innerWidth - rect.right;
+                                  const distanceToTop = rect.top;
+                                  const distanceToBottom = window.innerHeight - rect.bottom;
+                                  let top;
+
+                                  if (distanceToTop < postOnHoverHeight / 2) {
+                                    top = window.scrollY - 5;
+                                  } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                    top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                  } else {
+                                    top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                  }
+
+                                  if (distanceToRight < 200) {
+                                    setOutOfViewPosition({
+                                      top,
+                                      right: window.innerWidth - rect.left - 10,
+                                      maxWidth: rect.left - 5,
+                                    });
+                                  } else {
+                                    setOutOfViewPosition({
+                                      top,
+                                      left: rect.left + rect.width + 5,
+                                      maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                    });
+                                  }
+                                });
+                              }
+                            }}
+                            postQuoteOnLeave={() => {
+                              removeHighlight();
+                              setOutOfViewCid(null);
+                            }}
+                          />
                           <EditLabel key={`edit-label-thread-${index}`} commentCid={comment.cid} className='ttl' />
                           <StateLabel key={`state-label-thread-${index}`} commentIndex={comment.index} className='ttl ellipsis' />
                         </blockquote>
@@ -2376,7 +2425,56 @@ const Thread = () => {
                       <blockquote key={`mob-bq-${comment.cid}`} className='post-message-mobile'>
                         {comment.content ? (
                           <>
-                            <Post content={comment.content} comment={comment} key={`post-mobile-${comment.cid}`} />
+                            <Post
+                              key={`post-${comment.cid}`}
+                              content={comment.content}
+                              postQuoteRef={(quoteShortParentCid, ref) => {
+                                postRefs.current[quoteShortParentCid] = ref;
+                              }}
+                              postQuoteOnClick={(quoteShortParentCid) => {
+                                handleQuoteClick(comment, quoteShortParentCid, null);
+                              }}
+                              postQuoteOnOver={(quoteShortParentCid) => {
+                                const quoteParentCid = cidTracker[quoteShortParentCid];
+                                if (outOfViewCid !== quoteParentCid) {
+                                  handleQuoteHover(comment, quoteShortParentCid, () => {
+                                    setOutOfViewCid(quoteParentCid);
+
+                                    const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
+                                    const distanceToRight = window.innerWidth - rect.right;
+                                    const distanceToTop = rect.top;
+                                    const distanceToBottom = window.innerHeight - rect.bottom;
+                                    let top;
+
+                                    if (distanceToTop < postOnHoverHeight / 2) {
+                                      top = window.scrollY - 5;
+                                    } else if (distanceToBottom < postOnHoverHeight / 2) {
+                                      top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
+                                    } else {
+                                      top = rect.top + window.scrollY - postOnHoverHeight / 2;
+                                    }
+
+                                    if (distanceToRight < 200) {
+                                      setOutOfViewPosition({
+                                        top,
+                                        right: window.innerWidth - rect.left - 10,
+                                        maxWidth: rect.left - 5,
+                                      });
+                                    } else {
+                                      setOutOfViewPosition({
+                                        top,
+                                        left: rect.left + rect.width + 5,
+                                        maxWidth: window.innerWidth - rect.left - rect.width - 5,
+                                      });
+                                    }
+                                  });
+                                }
+                              }}
+                              postQuoteOnLeave={() => {
+                                removeHighlight();
+                                setOutOfViewCid(null);
+                              }}
+                            />
                             <EditLabel key={`edit-label-thread-mob-${index}`} commentCid={comment.cid} className='ttl' />
                             <StateLabel key={`state-label-thread-mob-${index}`} commentIndex={comment.index} className='ttl ellipsis' />
                           </>