Fixed #181

src/components/OfflineIndicator.jsx

@@ -7,7 +7,7 @@ const OfflineIndicator = ({ address, className, tooltipPlace }) => {
 
   return (
     <>
-      {!isOnline && (
+      {true && (
         <>
           {" "}
           <img

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

@@ -32,13 +32,22 @@ export const Threads = styled.div`
 
   .thread-icons {
     display: inline;
-    height: 16px;
-    margin: 2px 0 0 -101px;
-    position: absolute;
     width: 100px;
+    height: 16px;
+    position:absolute;
+    margin: 6px 60px 0 0px;
     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;

src/components/views/AllCatalog.jsx

@@ -378,7 +378,11 @@ const AllCatalog = () => {
             ) : null}
           </Link>
         ) : null}
-        <div key={`ti-`} className="thread-icons" >
+        <div key={`ti-`} className={`thread-icons ${(commentMediaInfo && (
+              commentMediaInfo.type === 'image' || 
+              commentMediaInfo.type === 'video' || 
+              (commentMediaInfo.type === 'webpage' && 
+              commentMediaInfo.thumbnail))) ? "thread-icon-has-display" :""}`} >
         {(commentMediaInfo && (
           commentMediaInfo.type === 'image' || 
           commentMediaInfo.type === 'video' || 
@@ -386,7 +390,7 @@ const AllCatalog = () => {
           commentMediaInfo.thumbnail))) ? (                          
             <OfflineIndicator 
             address={thread.subplebbitAddress} 
-            className="thread-icon offline-icon"
+            className={`thread-icon offline-icon `}
             tooltipPlace="top" />
           ) : (
             <OfflineIndicator 

src/components/views/SubscriptionsCatalog.jsx

@@ -351,7 +351,8 @@ const SubscriptionsCatalog = () => {
                 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-`}
@@ -368,7 +369,11 @@ const SubscriptionsCatalog = () => {
             ) : null}
           </Link>
         ) : null}
-        <div key={`ti-`} className="thread-icons" >
+        <div key={`ti-`} className={`thread-icons ${(commentMediaInfo && (
+          commentMediaInfo.type === 'image' ||
+          commentMediaInfo.type === 'video' ||
+          (commentMediaInfo.type === 'webpage' &&
+            commentMediaInfo.thumbnail))) ? "thread-icon-has-display" : ""}`} >
           {(commentMediaInfo && (
             commentMediaInfo.type === 'image' ||
             commentMediaInfo.type === 'video' ||
@@ -396,9 +401,11 @@ const SubscriptionsCatalog = () => {
               </>
             ) : 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 => {
@@ -422,9 +429,11 @@ const SubscriptionsCatalog = () => {
             <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' }}
               >
@@ -571,7 +580,7 @@ const SubscriptionsCatalog = () => {
             <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) => (
@@ -620,7 +629,7 @@ const SubscriptionsCatalog = () => {
                       <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'
@@ -660,7 +669,7 @@ const SubscriptionsCatalog = () => {
           <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>
@@ -720,7 +729,7 @@ const SubscriptionsCatalog = () => {
             marginTop: "2px",
           }}>
             Style:
-             
+
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>