style(pending): fix position of state string

src/components/styled/views/Thread.styled.jsx

@@ -195,6 +195,23 @@ export const TopBar = styled.div`
       overflow: hidden;
     }
 
+    .stats-pending-container {
+      float: right;
+      margin-top: 3px;
+      margin-right: 30px;
+      overflow: hidden;
+      max-width: calc(100vw - 50vw);
+    }
+
+    #stats-pending {
+      display: inline-block;
+      max-width: calc(100vw - 50vw);
+      word-wrap: break-word;
+      white-space: nowrap;
+      text-overflow: '';
+      overflow: hidden;
+    }
+
     .ellipsis-all {
       white-space: nowrap;
     }
@@ -246,6 +263,24 @@ export const TopBar = styled.div`
       overflow: hidden;
     }
 
+    .stats-pending-container {
+      height: 25px;
+      position: absolute;
+      text-align: left;
+      overflow: hidden;
+      width: 100vw;
+      margin-top: 8px;
+    }
+
+    #stats-pending {
+      display: inline-block;
+      max-width: 90vw;
+      word-wrap: break-word;
+      white-space: nowrap;
+      text-overflow: '';
+      overflow: hidden;
+    }
+
     .ellipsis-all {
       white-space: nowrap;
     }

src/components/views/Pending.jsx

@@ -291,7 +291,10 @@ const Pending = () => {
             </Link>
             ]
           </span>
-          <span className={stateString ? 'reply-stat ellipsis' : ''}>{stateString}</span>
+          <div className='stats-pending-container'>
+            <span id='stats-pending'>{stateString}</span>
+            <span className={stateString ? 'ellipsis-all' : ''} />
+          </div>
           <hr />
         </TopBar>
         <Tooltip id='tooltip' className='tooltip' />