Revert "fix touch bug"

This reverts commit 2d23d2e996.

src/components/Board.jsx

@@ -280,18 +280,10 @@ const Board = ({ setBodyStyle }) => {
     const targetElement = [...document.querySelectorAll('.post-reply')]
       .find(el => el.innerHTML.includes(cid));
     if (targetElement) {
-      const rect = targetElement.getBoundingClientRect();
-      if (rect.top < 0 || rect.bottom > window.innerHeight) {
         targetElement.scrollIntoView({ behavior: "instant" });
-      }
     }
   }
 
-  function handleTouch(event) {
-    event.preventDefault();
-    event.target.click();
-  }
-
 
   const handleStyleChange = (event) => {
     switch (event.target.value) {
@@ -387,17 +379,17 @@ const Board = ({ setBodyStyle }) => {
           {defaultSubplebbits.map(subplebbit => (
             <span className="boardList" key={`span-${subplebbit.address}`}>
               [
-              <Link style={{ touchAction: 'manipulation' }} to={`/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
+              <Link to={`/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
               >{subplebbit.title}</Link>
               ]&nbsp;
             </span>
           ))}
           <span className="nav">
             [
-            <Link style={{ touchAction: 'manipulation' }} to="" onClick={handleVoidClick}>Settings</Link>
+            <Link to="" onClick={handleVoidClick}>Settings</Link>
             ]
             [
-            <Link style={{ touchAction: 'manipulation' }} to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+            <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
             )}>Home</Link>
             ]
           </span>
@@ -413,9 +405,9 @@ const Board = ({ setBodyStyle }) => {
               </select>
             </div>
             <div className="page-jump">
-              <Link style={{ touchAction: 'manipulation' }} to="" onClick={handleVoidClick}>Settings</Link>
+              <Link to="" onClick={handleVoidClick}>Settings</Link>
               &nbsp;
-              <Link style={{ touchAction: 'manipulation' }} to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+              <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
                 )}>Home</Link>
             </div>
           </div>
@@ -476,11 +468,8 @@ const Board = ({ setBodyStyle }) => {
                 <button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help">?</button>
               </td>
             </tr>
-            <tr>
-              <td>
-              <button onClick={() => setIsCaptchaOpen(true)}>Show Captcha</button>
-              </td>
-            </tr>
+            <button onClick={() => setIsCaptchaOpen(true)}>Show Captcha</button>
+            <tr></tr>
           </tbody>
         </PostFormTable>
       </PostForm>
@@ -500,12 +489,12 @@ const Board = ({ setBodyStyle }) => {
         </span>
         <div id="catalog-button-desktop">
           [
-          <Link style={{ touchAction: 'manipulation' }} to={`/${selectedAddress}/catalog`}>Catalog</Link>
+          <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
           ]
         </div>
         <div id="catalog-button-mobile">
           <span className="btn-wrap">
-            <Link style={{ touchAction: 'manipulation' }} to={`/${selectedAddress}/catalog`}>Catalog</Link>
+            <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
           </span>
         </div>
       </TopBar>
@@ -532,7 +521,7 @@ const Board = ({ setBodyStyle }) => {
                           File:&nbsp;
                           <a key={`fa-${Math.random()}`} href={`${thread.link}`} target="_blank">filename.something</a>&nbsp;(metadata)
                         </div>
-                        <Link style={{ touchAction: 'manipulation' }} to="" key={`fta-${Math.random()}`} onClick={handleVoidClick} target="_blank" className="file-thumb">
+                        <Link to="" key={`fta-${Math.random()}`} onClick={handleVoidClick} target="_blank" className="file-thumb">
                           <img key={`fti-${Math.random()}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
                         </Link>
                       </div>
@@ -586,22 +575,22 @@ const Board = ({ setBodyStyle }) => {
                         <span key={`dt-${Math.random()}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
                         &nbsp;
                         <span key={`pn-${Math.random()}`} className="post-number">
-                          <Link style={{ touchAction: 'manipulation' }} to="" key={`pl1-${Math.random()}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
-                          <Link style={{ touchAction: 'manipulation' }} to="" key={`pl2-${Math.random()}`} onClick={handleVoidClick} title="Reply to this post">{thread.cid.slice(0, 8)}</Link>
+                          <Link to="" key={`pl1-${Math.random()}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
+                          <Link to="" key={`pl2-${Math.random()}`} onClick={handleVoidClick} title="Reply to this post">{thread.cid.slice(0, 8)}</Link>
                           &nbsp;
                           <span key={`rl1-${Math.random()}`}>
                             [
-                            <Link style={{ touchAction: 'manipulation' }} key={`rl2-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link>
+                            <Link key={`rl2-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link>
                             ]
                           </span>
                         </span>
-                        <Link style={{ touchAction: 'manipulation' }} to="" key={`pmb-${Math.random()}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</Link>
+                        <Link to="" key={`pmb-${Math.random()}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</Link>
                         <div key={`bi-${Math.random()}`} id="backlink-id" className="backlink">
                           {thread.replies?.pages.topAll.comments
                             .sort((a, b) => a.timestamp - b.timestamp)
                             .map((reply) => (
                               <div key={`div-${Math.random()}`} style={{display: 'inline-block'}}>
-                              <Link style={{ touchAction: 'manipulation' }} key={`ql-${Math.random()}`}
+                              <Link key={`ql-${Math.random()}`}
                               to={handleVoidClick} className="quote-link" 
                               onClick={(event) => handleQuoteClick(reply, event)}>
                                 c/{reply.cid.slice(0, 8)}</Link>
@@ -619,7 +608,7 @@ const Board = ({ setBodyStyle }) => {
                             <span key={`ttl-s-${Math.random()}`} className="ttl"> (...) 
                             <br key={`ttl-s-br1-${Math.random()}`} /><br key={`ttl-s-br2${Math.random()}`} />
                             Post too long.&nbsp;
-                              <Link style={{ touchAction: 'manipulation' }} key={`ttl-l-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
+                              <Link key={`ttl-l-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
                               &nbsp;to view. </span>
                           </blockquote>
                         </Fragment>
@@ -635,7 +624,7 @@ const Board = ({ setBodyStyle }) => {
                   <span key={`oc-${Math.random()}`} className="ttl">
                     <span key={`oc1-${Math.random()}`}>
                       {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp;
-                      <Link style={{ touchAction: 'manipulation' }} key={`oc2-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">here</Link>
+                      <Link key={`oc2-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">here</Link>
                       &nbsp;to view.
                     </span>
                   </span>) : null}
@@ -685,16 +674,16 @@ const Board = ({ setBodyStyle }) => {
                       <span key={`dt-${Math.random()}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
                       &nbsp;
                       <span key={`pn-${Math.random()}`} className="post-number">
-                        <Link style={{ touchAction: 'manipulation' }} to="" key={`pl1-${Math.random()}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
-                        <Link style={{ touchAction: 'manipulation' }} to="" key={`pl2-${Math.random()}`} onClick={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</Link>
+                        <Link to="" key={`pl1-${Math.random()}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
+                        <Link to="" key={`pl2-${Math.random()}`} onClick={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</Link>
                       </span>
-                      <Link style={{ touchAction: 'manipulation' }} to="" key={`pmb-${Math.random()}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</Link>
+                      <Link to="" key={`pmb-${Math.random()}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</Link>
                       <div id="backlink-id" className="backlink">
                         {reply.replies?.pages.topAll.comments
                           .sort((a, b) => a.timestamp - b.timestamp)
                           .map((reply) => (
                             <div key={`div-${Math.random()}`} style={{display: 'inline-block'}}>
-                            <Link style={{ touchAction: 'manipulation' }} to={handleVoidClick} key={`ql-${Math.random()}`}
+                            <Link to={handleVoidClick} key={`ql-${Math.random()}`}
                               className="quote-link" 
                               onClick={(event) => handleQuoteClick(reply, event)}>
                               c/{reply.cid.slice(0, 8)}</Link>
@@ -708,19 +697,19 @@ const Board = ({ setBodyStyle }) => {
                         reply.content.length > 1000 ?
                         <Fragment key={`fragment8-${Math.random()}`}>
                           <blockquote key={`pm-${Math.random()}`} className="post-message">
-                            <Link style={{ touchAction: 'manipulation' }} to="" key={`r-pm-${Math.random()}`} className="quotelink" onClick={handleVoidClick}>
+                            <Link to="" key={`r-pm-${Math.random()}`} className="quotelink" onClick={handleVoidClick}>
                               {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
                             </Link>
                             {reply.content.slice(0, 1000)}
                             <span key={`ttl-s-${Math.random()}`} className="ttl"> (...)
                             <br key={`ttl-s-br1-${Math.random()}`} /><br key={`ttl-s-br2${Math.random()}`} />
                             Comment too long.&nbsp;
-                              <Link style={{ touchAction: 'manipulation' }} key={`ttl-l-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
+                              <Link key={`ttl-l-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
                             &nbsp;to view. </span>
                           </blockquote>
                         </Fragment>
                       : <blockquote key={`pm-${Math.random()}`} className="post-message">
-                          <Link style={{ touchAction: 'manipulation' }} to={handleVoidClick} key={`r-pm-${Math.random()}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}>
+                          <Link to={handleVoidClick} key={`r-pm-${Math.random()}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}>
                             {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
                           </Link>
                           {reply.content}
@@ -735,7 +724,7 @@ const Board = ({ setBodyStyle }) => {
                 <div key={`mob-c-${Math.random()}`} className="op-container">
                   <div key={`mob-po-${Math.random()}`} className="post op">
                     <div key={`mob-pi-${Math.random()}`} className="post-info-mobile">
-                      <Link style={{ touchAction: 'manipulation' }} to="" key={`mob-pb-${Math.random()}`} className="post-menu-button-mobile" onClick={handleVoidClick}>...</Link>
+                      <Link to="" key={`mob-pb-${Math.random()}`} className="post-menu-button-mobile" onClick={handleVoidClick}>...</Link>
                       <span key={`mob-nbm-${Math.random()}`} className="name-block-mobile">
                         {thread.author.displayName
                         ? thread.author.displayName.length > 15
@@ -790,12 +779,12 @@ const Board = ({ setBodyStyle }) => {
                       <span key={`mob-dt-${Math.random()}`} className="date-time-mobile">
                         {getDate(thread.timestamp)}
                         &nbsp;
-                        <Link style={{ touchAction: 'manipulation' }} to="" key={`mob-no-${Math.random()}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
-                        <Link style={{ touchAction: 'manipulation' }} to="" key={`mob-no2-${Math.random()}`} onClick={handleVoidClick} title="Reply to this post">{thread.cid.slice(0, 8)}</Link>
+                        <Link to="" key={`mob-no-${Math.random()}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
+                        <Link to="" key={`mob-no2-${Math.random()}`} onClick={handleVoidClick} title="Reply to this post">{thread.cid.slice(0, 8)}</Link>
                       </span>
                     </div>
                     <div key={`mob-f-${Math.random()}`} className="file-mobile">
-                      <Link style={{ touchAction: 'manipulation' }} to="" key={`mob-ft${Math.random()}`} className="file-thumb-mobile" onClick={handleVoidClick} target="_blank">
+                      <Link to="" key={`mob-ft${Math.random()}`} className="file-thumb-mobile" onClick={handleVoidClick} target="_blank">
                         <img key={`mob-img-${Math.random()}`} src="/assets/plebchan-psycho.png" alt="" />
                         <div key={`mob-fi-${Math.random()}`} className="file-info-mobile">58 KB JPG</div>
                       </Link>
@@ -808,7 +797,7 @@ const Board = ({ setBodyStyle }) => {
                             <span key={`mob-ttl-s-${Math.random()}`} className="ttl"> (...)
                             <br key={`mob-ttl-s-br1-${Math.random()}`} /><br key={`mob-ttl-s-br2${Math.random()}`} />
                              Post too long.&nbsp;
-                              <Link style={{ touchAction: 'manipulation' }} key={`mob-ttl-l-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
+                              <Link key={`mob-ttl-l-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
                               &nbsp;to view. </span>
                           </blockquote>
                         </Fragment>
@@ -819,7 +808,7 @@ const Board = ({ setBodyStyle }) => {
                   </div>
                   <div key={`mob-pl-${Math.random()}`} className="post-link-mobile">
                     <span key={`mob-info-${Math.random()}`} className="info-mobile">{thread.replyCount} Replies / ? Images</span>
-                    <Link style={{ touchAction: 'manipulation' }} key={`rl2-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="button-mobile" >View Thread</Link>
+                    <Link key={`rl2-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="button-mobile" >View Thread</Link>
                   </div>
                 </div>
                 {renderedComments.map(reply => {
@@ -866,27 +855,27 @@ const Board = ({ setBodyStyle }) => {
                         </span>
                         <span key={`mob-dt-${Math.random()}`} className="date-time-mobile">
                         {getDate(reply.timestamp)}&nbsp;
-                          <Link style={{ touchAction: 'manipulation' }} to="" key={`mob-pl1-${Math.random()}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
-                          <Link style={{ touchAction: 'manipulation' }} to="" key={`mob-pl2-${Math.random()}`} onClick={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</Link>
+                          <Link to="" key={`mob-pl1-${Math.random()}`} onClick={handleVoidClick} title="Link to this post">c/</Link>
+                          <Link to="" key={`mob-pl2-${Math.random()}`} onClick={handleVoidClick} title="Reply to this post">{reply.cid.slice(0, 8)}</Link>
                         </span>
                       </div>
                       {reply.content ? (
                         reply.content.length > 1000 ?
                         <Fragment key={`fragment15-${Math.random()}`}>
                           <blockquote key={`mob-pm-${Math.random()}`} className="post-message">
-                            <Link style={{ touchAction: 'manipulation' }} to="" key={`mob-r-pm-${Math.random()}`} className="quotelink" onClick={handleVoidClick}>
+                            <Link to="" key={`mob-r-pm-${Math.random()}`} className="quotelink" onClick={handleVoidClick}>
                               {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
                             </Link>
                             {reply.content.slice(0, 1000)}
                             <span key={`mob-ttl-s-${Math.random()}`} className="ttl"> (...)
                             <br key={`mob-ttl-s-br1-${Math.random()}`} /><br key={`mob-ttl-s-br2${Math.random()}`} />
                             Comment too long.&nbsp;
-                              <Link style={{ touchAction: 'manipulation' }} key={`mob-ttl-l-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
+                              <Link key={`mob-ttl-l-${Math.random()}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
                             &nbsp;to view. </span>
                           </blockquote>
                         </Fragment>
                       : <blockquote key={`mob-pm-${Math.random()}`} className="post-message">
-                          <Link style={{ touchAction: 'manipulation' }} to={handleVoidClick} key={`mob-r-pm-${Math.random()}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}>
+                          <Link to={handleVoidClick} key={`mob-r-pm-${Math.random()}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}>
                             {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
                           </Link>
                           {reply.content}