prevent horizontal layout shift on new comments

components/item-info.js

@@ -42,9 +42,12 @@ export default function ItemInfo ({ item, pendingSats, full, commentsText, class
           <span>{abbrNum(item.boost)} boost</span>
           <span> \ </span>
         </>}
-      <Link href={`/items/${item.id}`} title={`${item.commentSats} sats`} className='text-reset'>
+      <Link href={`/items/${item.id}`} title={`${item.commentSats} sats`} className='text-reset position-relative'>
         {item.ncomments} {commentsText || 'comments'}
-        {hasNewComments && <>{' '}<Badge className={styles.newComment} bg={null}>new</Badge></>}
+        {hasNewComments &&
+          <span className={styles.notification}>
+            <span className='invisible'>{' '}</span>
+          </span>}
       </Link>
       <span> \ </span>
       <span>

components/item.module.css

@@ -7,6 +7,15 @@
     padding-bottom: .15rem;
 }
 
+.notification {
+    position: absolute;
+    padding: 2px;
+    background-color: var(--bs-info);
+    top: -1px;
+    right: -3px;
+    border: 1px solid var(--bs-body-bg);
+}
+
 .icon {
     display: inline-block;
 }