shortened mobile text and Thread

src/components/Board.jsx

@@ -486,7 +486,8 @@ const Board = ({ setBodyStyle }) => {
                         <>
                           <blockquote key={`bq-${thread.cid}`}>
                             {thread.content.slice(0, 2000)}
-                            <span key={`ttl-s-${thread.cid}`} className="ttl"> (...) Thread content too long.&nbsp;
+                            <br key={`ttl-s-br1-${thread.cid}`} /><br key={`ttl-s-br2${thread.cid}`} />
+                            <span key={`ttl-s-${thread.cid}`} className="ttl"> (...) Thread too long.&nbsp;
                               <Link key={`ttl-l-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
                               &nbsp;to view. </span>
                           </blockquote>
@@ -646,13 +647,22 @@ const Board = ({ setBodyStyle }) => {
                         <div key={`mob-fi-${thread.cid}`} className="file-info-mobile">58 KB JPG</div>
                       </a>
                     </div>
-                    <blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
+                    {thread.content ? (
-                      {thread.content ? (
+                        thread.content.length > 1500 ?
                         <>
-                          {thread.content}
+                          <blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
+                            {thread.content.slice(0, 1500)}
+                            <span key={`mob-ttl-s-${thread.cid}`} className="ttl"> (...)
+                            <br key={`mob-ttl-s-br1-${thread.cid}`} /><br key={`mob-ttl-s-br2${thread.cid}`} />
+                             Thread too long.&nbsp;
+                              <Link key={`mob-ttl-l-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
+                              &nbsp;to view. </span>
+                          </blockquote>
                         </>
-                      ) : null}
+                      : <blockquote key={`mob-bq-${thread.cid}`} className="post-message-mobile">
-                    </blockquote>
+                          {thread.content}
+                        </blockquote>)
+                      : null}
                   </div>
                   <div key={`mob-pl-${thread.cid}`} className="post-link-mobile">
                     <span key={`mob-info-${thread.cid}`} className="info-mobile">{thread.replyCount} Replies / ? Images</span>
@@ -686,20 +696,20 @@ const Board = ({ setBodyStyle }) => {
                           &nbsp;
                           <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
                             (User:&nbsp;
-                            {reply.author.address.length > 12 ?
+                            {reply.author.address.length > 10 ?
                             <>
                               <Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address-mobile" className="tooltip" />
                               <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile"
                               data-tooltip-id="tt-address-mobile"
                               data-tooltip-content={reply.author.address}
                               data-tooltip-place="top">
-                                {reply.author.address.slice(0, 12) + "..."}
+                                {reply.author.address.slice(0, 10) + "..."}
                               </span>
                             </>
                             : <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
                               {reply.author.address}
                             </span>}
-                            )
+                            )&nbsp;
                           </span>
                           <br key={`mob-br-${reply.cid}`} />
                         </span>
@@ -709,12 +719,28 @@ const Board = ({ setBodyStyle }) => {
                           <a key={`mob-pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a>
                         </span>
                       </div>
-                      <blockquote key={`mob-pm-${reply.cid}`} className="post-message-mobile">
+                      {reply.content ? (
-                        <a key={`mob-ql-${reply.cid}`} className="quotelink-mobile" href={handleVoidClick}>
+                        reply.content.length > 1000 ?
-                          {`>>${counterString}`}{<br />}
+                        <>
-                        </a>
+                          <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
-                        {reply.content}
+                            <a key={`mob-r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}>
-                      </blockquote>
+                              {`>>${counterString}`}{<br />}
+                            </a>
+                            {reply.content.slice(0, 1000)}
+                            <span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...)
+                            <br key={`mob-ttl-s-br1-${reply.cid}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
+                            Comment too long.&nbsp;
+                              <Link key={`mob-ttl-l-${reply.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
+                            &nbsp;to view. </span>
+                          </blockquote>
+                        </>
+                      : <blockquote key={`mob-pm-${thread.cid}`} className="post-message">
+                          <a key={`mob-r-pm-${reply.cid}`} className="quotelink" href={handleVoidClick}>
+                            {`>>${counterString}`}{<br />}
+                          </a>
+                          {reply.content}
+                        </blockquote>)
+                      : null}
                     </div>
                   </div>
                 )})}

src/components/Thread.jsx

@@ -343,12 +343,54 @@ const Thread = ({ setBodyStyle }) => {
                         </a>
                       </div>
                     <span className="name-block">
-                      <span key={`q-${comment.cid}`} className="title">{comment.title}</span>
+                        {comment.title ? (
+                          comment.title.length > 75 ?
+                          <>
+                            <Tooltip key={`mob-tt-tm-${comment.cid}`} id="tt-title-mobile" className="tooltip" />
+                            <span key={`q-${comment.cid}`} className="title"
+                            data-tooltip-id="tt-title-mobile"
+                            data-tooltip-content={comment.title}
+                            data-tooltip-place="top">
+                              {comment.title.slice(0, 75) + " (...)"}
+                            </span>
+                          </>
+                        : <span key={`q-${comment.cid}`} className="title">
+                          {comment.title}
+                          </span>) 
+                        : null}
                       &nbsp;
-                      <span className="name">{comment.author.displayName || "Anonymous"}</span>
+                      {comment.author.displayName
+                        ? comment.author.displayName.length > 20
+                        ? <>
+                            <Tooltip key={`mob-tt-nm-${comment.cid}`} id="tt-name-mobile" className="tooltip" />
+                            <span key={`n-${comment.cid}`} className="name"
+                            data-tooltip-id="tt-name-mobile"
+                            data-tooltip-content={comment.author.displayName}
+                            data-tooltip-place="top">
+                              {comment.author.displayName.slice(0, 20) + " (...)"}
+                            </span>
+                          </> 
+                          : <span key={`n-${comment.cid}`} className="name">
+                            {comment.author.displayName}</span>
+                        : <span key={`n-${comment.cid}`} className="name">
+                          Anonymous</span>}
+                        &nbsp;
                       &nbsp;
                       <span className="poster-address">
-                        (User: {comment.author.address})
+                        (User:&nbsp;
+                          {comment.author.address.length > 20 ?
+                        <>
+                          <Tooltip key={`mob-tt-am-${comment.cid}`} id="tt-address-mobile" className="tooltip" />
+                          <span key={`pa-${comment.cid}`} className="poster-address"
+                          data-tooltip-id="tt-address-mobile"
+                          data-tooltip-content={comment.author.address}
+                          data-tooltip-place="top">
+                            {comment.author.address.slice(0, 20) + "..."}
+                          </span>
+                        </>
+                        : <span key={`pa-${comment.cid}`} className="poster-address">
+                          {comment.author.address}
+                        </span>})
                       </span>
                       &nbsp;
                       <span className="date-time" data-utc="data">2 weeks ago</span>
@@ -384,10 +426,37 @@ const Thread = ({ setBodyStyle }) => {
                         <div key={`pi-${reply.cid}`} className="post-info">
                         &nbsp;
                           <span key={`nb-${reply.cid}`} className="nameblock">
-                            <span key={`n-${reply.cid}`} className="name">{reply.author.displayName || "Anonymous"}</span>
+                          {reply.author.displayName
+                          ? reply.author.displayName.length > 20
+                          ? <>
+                              <Tooltip key={`mob-tt-nm-${reply.cid}`} id="tt-name" className="tooltip" />
+                              <span key={`mob-n-${reply.cid}`} className="name"
+                              data-tooltip-id="tt-name"
+                              data-tooltip-content={reply.author.displayName}
+                              data-tooltip-place="top">
+                                {reply.author.displayName.slice(0, 20) + " (...)"}
+                              </span>
+                            </>
+                            : <span key={`mob-n-${reply.cid}`} className="name">
+                              {reply.author.displayName}</span>
+                          : <span key={`mob-n-${reply.cid}`} className="name">
+                            Anonymous</span>}
                             &nbsp;
                             <span key={`pa-${reply.cid}`} className="poster-address">
-                              (User: {reply.author.address})
+                              (User:&nbsp;
+                              {reply.author.address.length > 20 ?
+                              <>
+                                <Tooltip key={`mob-tt-am-${reply.cid}`} id="tt-address" className="tooltip" />
+                                <span key={`mob-ha-${reply.cid}`}
+                                data-tooltip-id="tt-address"
+                                data-tooltip-content={reply.author.address}
+                                data-tooltip-place="top">
+                                  {reply.author.address.slice(0, 20) + "..."}
+                                </span>
+                              </>
+                              : <span key={`mob-ha-${reply.cid}`}>
+                                {reply.author.address}
+                              </span>})
                             </span>
                           </span>
                           &nbsp;