Updated as per requirnments

src/components/styled/views/Catalog.styled.jsx

@@ -32,22 +32,13 @@ export const Threads = styled.div`
 
   .thread-icons {
     display: inline;
-    width: 100px;
     height: 16px;
+    margin: 2px 0 0 -101px;
     position: absolute;
-    margin: 6px 60px 0 0px;
+    width: 100px;
     text-align: right;
-    top:0;
-    right:0;
-    z-index:4;
   }
 
-  .thread-icon-has-display{
-    transform: translate(68px, -4px);
-    scale: 0.8;
-  }
-
-
   .offline-icon {
     height: 16px;
     margin: 2px;
@@ -60,6 +51,16 @@ export const Threads = styled.div`
     margin-top: -2px;
   }
 
+  .offline-icon-no-link-shifted {
+    height: 11px;
+    position: absolute;
+    margin-left: 35px;
+    margin-top: -2px;
+  }
+
+  .offline-icon-no-link-hovered {
+    transform: translate(16px,0);
+  }
   .sticky-icon {
     background-image: url(assets/sticky.gif);
     width: 16px;

src/components/views/AllCatalog.jsx

@@ -124,8 +124,7 @@ const AllCatalog = () => {
 
   const tryLoadMore = async () => {
     try { loadMore() }
-    catch (e)
+    catch (e) { await new Promise(resolve => setTimeout(resolve, 1000)) }
-    {await new Promise(resolve => setTimeout(resolve, 1000))}
   };
 
 
@@ -361,7 +360,8 @@ const AllCatalog = () => {
                 src={commentMediaInfo.url} alt={commentMediaInfo.type}
                 onError={(e) => {
                   e.target.src = fallbackImgUrl
-                e.target.onerror = null;}}  />
+                  e.target.onerror = null;
+                }} />
             ) : null}
             {commentMediaInfo?.type === "video" ? (
               <video className="card" key={`fti-`}
@@ -378,11 +378,7 @@ const AllCatalog = () => {
             ) : null}
           </Link>
         ) : null}
-        <div key={`ti-`} className={`thread-icons ${(commentMediaInfo && (
+        <div key={`ti-`} className={`thread-icons`} >
-              commentMediaInfo.type === 'image' || 
-              commentMediaInfo.type === 'video' || 
-              (commentMediaInfo.type === 'webpage' && 
-              commentMediaInfo.thumbnail))) ? "thread-icon-has-display" :""}`} >
           {(commentMediaInfo && (
             commentMediaInfo.type === 'image' ||
             commentMediaInfo.type === 'video' ||
@@ -395,7 +391,7 @@ const AllCatalog = () => {
           ) : (
             <OfflineIndicator
               address={thread.subplebbitAddress}
-            className="thread-icon offline-icon-no-link"
+              className={`thread-icon ${linkCount > 0 ? "offline-icon-no-link-shifted" : "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
               tooltipPlace="top" />
           )}
         </div>
@@ -410,9 +406,11 @@ const AllCatalog = () => {
               </>
             ) : null}
             <PostMenu
-            style={{ display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
+              style={{
+                display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
                 position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
-            zIndex: '999'}}
+                zIndex: '999'
+              }}
               key={`pmb-`}
               title="Post menu"
               ref={el => {
@@ -436,9 +434,11 @@ const AllCatalog = () => {
             <PostMenuCatalog selectedStyle={selectedStyle}
               ref={el => { postMenuCatalogRef.current = el }}
               onClick={(event) => event.stopPropagation()}
-              style={{position: "absolute", 
+              style={{
+                position: "absolute",
                 top: menuPosition.top + 7,
-              left: menuPosition.left}}>
+                left: menuPosition.left
+              }}>
               <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
                 style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
               >
@@ -585,7 +585,7 @@ const AllCatalog = () => {
             <span className="boardList">
               [
               <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-               / 
+              /
               <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
               ]&nbsp;[
               {defaultSubplebbits.map((subplebbit, index) => (
@@ -634,7 +634,7 @@ const AllCatalog = () => {
                       <option key={`option-${subplebbit.address}`} value={subplebbit.address}
                       >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
                     ))}
-                  </select> 
+                  </select>
                   <span id="button-span" style={{ cursor: 'pointer' }} onClick={
                     () => alert(
                       'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
@@ -666,7 +666,7 @@ const AllCatalog = () => {
           <hr />
           <span className="style-changer">
             Style:
-             
+
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -726,7 +726,7 @@ const AllCatalog = () => {
             marginTop: "2px",
           }}>
             Style:
-             
+
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -743,7 +743,7 @@ const AllCatalog = () => {
               <span className="boardList">
                 [
                 <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-                 / 
+                /
                 <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
                 ]&nbsp;[
                 {defaultSubplebbits.map((subplebbit, index) => (

src/components/views/SubscriptionsCatalog.jsx

@@ -369,11 +369,7 @@ const SubscriptionsCatalog = () => {
             ) : null}
           </Link>
         ) : null}
-        <div key={`ti-`} className={`thread-icons ${(commentMediaInfo && (
+        <div key={`ti-`} className="thread-icons" >
-          commentMediaInfo.type === 'image' ||
-          commentMediaInfo.type === 'video' ||
-          (commentMediaInfo.type === 'webpage' &&
-            commentMediaInfo.thumbnail))) ? "thread-icon-has-display" : ""}`} >
           {(commentMediaInfo && (
             commentMediaInfo.type === 'image' ||
             commentMediaInfo.type === 'video' ||
@@ -381,12 +377,12 @@ const SubscriptionsCatalog = () => {
               commentMediaInfo.thumbnail))) ? (
             <OfflineIndicator
               address={thread.subplebbitAddress}
-              className="thread-icon offline-icon"
+              className={`thread-icon offline-icon`}
               tooltipPlace="top" />
           ) : (
             <OfflineIndicator
               address={thread.subplebbitAddress}
-              className="thread-icon offline-icon-no-link"
+              className={`thread-icon ${linkCount> 0?"offline-icon-no-link-shifted": "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
               tooltipPlace="top" />
           )}
         </div>