fixed quote scroll to start of match

src/components/views/Board.jsx

@@ -384,7 +384,7 @@ const Board = () => {
               <Fragment key={`fr-${thread.cid}`}>
                 <div key={`t-${thread.cid}`} className="thread">
                   <div key={`c-${thread.cid}`} className="op-container">
-                    <div key={`po-${thread.cid}`} className="post op">
+                    <div key={`po-${thread.cid}`} className="post op op-desktop">
                       <hr key={`hr-${thread.cid}`} />
                       <div key={`pi-${thread.cid}`} className="post-info">
                       {commentMediaInfo?.url ? (
@@ -650,7 +650,7 @@ const Board = () => {
                 <div key={`mob-t-${thread.cid}`} className="thread-mobile">
                   <hr key={`mob-hr-${thread.cid}`} />
                   <div key={`mob-c-${thread.cid}`} className="op-container">
-                    <div key={`mob-po-${thread.cid}`} className="post op">
+                    <div key={`mob-po-${thread.cid}`} className="post op op-mobile">
                       <div key={`mob-pi-${thread.cid}`} className="post-info-mobile">
                         <button key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" onClick={() => {}} style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                         <span key={`mob-nbm-${thread.cid}`} className="name-block-mobile">

src/components/views/Thread.jsx

@@ -402,7 +402,7 @@ const Thread = () => {
           <>
             <div className="thread">
               <div className="op-container">
-                <div className="post op">
+                <div className="post op op-desktop">
                   <div className="post-info">
                   {commentMediaInfo?.url ? (
                       <div key={`f-${comment.cid}`} className="file" style={{marginBottom: "5px"}}>
@@ -616,9 +616,6 @@ const Thread = () => {
                           <Link to={() => {}} className="quote-link"
                             onClick={(event) => {
                               handleQuoteClick(reply, shortParentCid, comment.shortCid, event);
-                              if (shortParentCid === comment.shortCid) {
-                                window.scrollTo(0, 0);
-                              }
                             }}
                           >
                             {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
@@ -634,7 +631,7 @@ const Thread = () => {
             <div className="thread-mobile" key="thread-mobile">
               <hr />
               <div className="op-container" key="op-container">
-                  <div key={`mob-po-${comment.cid}`} className="post op">
+                  <div key={`mob-po-${comment.cid}`} className="post op op-mobile">
                     <div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
                       <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" onClick={() => {}}>...</button>
                       <span className="name-block-mobile">

src/utils/handleQuoteClick.js

@@ -1,6 +1,7 @@
 function handleQuoteClick(reply, parentCid, threadCid) {
   const cid = parentCid ? parentCid : reply.shortCid;
   const isMobile = window.innerWidth <= 480;
+  const postNumberSelector = isMobile ? '.post-number-mobile' : '.post-number-desktop';
 
   if (threadCid && cid === threadCid) {
     const highlightedElements = document.querySelectorAll('.highlighted');
@@ -9,11 +10,24 @@ function handleQuoteClick(reply, parentCid, threadCid) {
       el.classList.remove('highlighted');
     });
 
+    const opElementSelector = isMobile ? '.op-mobile' : '.op-desktop';
+    
+    const opElement = [...document.querySelectorAll(opElementSelector)]
+      .find(el => {
+        const postNumberElement = el.querySelector(postNumberSelector);
+        return postNumberElement && postNumberElement.innerHTML.includes(threadCid);
+      });
+
+    if (opElement) {
+      opElement.scrollIntoView({ behavior: "auto", block: "start" });
+    } else {
+      console.log('Could not find OP element');
+    }
+
     return;
   }
 
-  const targetElementSelector = isMobile ? '.post-reply-mobile' : '.post-reply-desktop';
+  const targetElementSelector = isMobile ? '.post-reply-mobile, .op-mobile' : '.post-reply-desktop, .op-desktop';
-  const postNumberSelector = isMobile ? '.post-number-mobile' : '.post-number-desktop';
 
   const targetElement = [...document.querySelectorAll(targetElementSelector)]
     .find(el => {
@@ -28,8 +42,11 @@ function handleQuoteClick(reply, parentCid, threadCid) {
       el.classList.remove('highlighted');
     });
 
-    targetElement.scrollIntoView({ behavior: "auto", block: "center" });
+    targetElement.scrollIntoView({ behavior: "auto", block: "start" });
-    targetElement.classList.add('highlighted');
+
+    if (!targetElement.classList.contains('op-mobile') && !targetElement.classList.contains('op-desktop')) {
+      targetElement.classList.add('highlighted');
+    }
 
   } else {
     console.log('Could not find target element');