fix item spacing generically

components/item-full.js

@@ -96,11 +96,12 @@ function TopLevelItem ({ item, noReply, ...props }) {
 
   return (
     <ItemComponent item={item} toc showFwdUser {...props}>
-      {item.text && <div className='mb-2'><ItemText item={item} /></div>}
+      <div className={styles.fullItemContainer}>
+        {item.text && <ItemText item={item} />}
         {item.url && <ItemEmbed item={item} />}
         {item.poll && <Poll item={item} />}
         {item.bounty &&
-        <div className='font-weight-bold my-2'>
+          <div className='font-weight-bold mt-2'>
             {item.bountyPaidTo?.length
               ? (
                 <div className='px-3 py-1 d-inline-block bg-grey-medium rounded text-success'>
@@ -111,6 +112,7 @@ function TopLevelItem ({ item, noReply, ...props }) {
                   {item.bounty} sats bounty
                 </div>)}
           </div>}
+      </div>
       {!noReply &&
         <>
           <Reply item={item} replyOpen />

styles/item.module.css

@@ -50,30 +50,45 @@
     width: 100%;
     padding-right: 12px;
 }
+
 .tweetSkeleton {
     width: 100%;
 }
+
 .tweetSkeleton {
     border: 0.05rem solid var(--theme-borderColor);
     border-radius: 12px;
     height: 200px;
     padding: 1.5rem;
 }
+
 .tweetSkeleton .img {
     height: 48px;
     width: 48px;
     border-radius: 50%;
 }
-.tweetSkeleton .content1, .tweetSkeleton .content2 {
+
+.tweetSkeleton .content1,
+.tweetSkeleton .content2 {
     height: 50%;
     margin-top: 1rem;
 }
+
 .tweetSkeleton .line {
     height: 25%;
     margin: 0.5rem 0;
     width: 100%;
     border-radius: .4rem;
 }
+
 .tweetSkeleton .line:last-child {
     width: 75%;
 }
+
+.fullItemContainer {
+    margin-bottom: .5rem;
+}
+
+.fullItemContainer:empty {
+    margin: 0;
+}