Improve comment widget spacing and text styles

Author: ruibaby

packages/comment-widget/src/base-comment-item.ts

@@ -120,7 +120,7 @@ export class BaseCommentItem extends LitElement {
           }
         </div>
 
-        <div class="item-content mt-2 content">
+        <div class="item-content mt-2.5 space-y-2.5 content">
           <slot name="pre-content"></slot>${unsafeHTML(sanitizeHtml(this.content))}
         </div>
 

packages/comment-widget/src/comment-editor-skeleton.ts

@@ -8,7 +8,7 @@ export class CommentEditorSkeleton extends LitElement {
       class="border rounded-base border-solid border-muted-1"
     >
       <div class="animate-pulse p-4">
-        <div class="h-4 mt-1 mb-3.5px w-20 bg-muted-1 rounded"></div>
+        <div class="h-4 mt-1 mb-8.75px w-20 bg-muted-1 rounded"></div>
       </div>
       <div class="py-2.5 px-3 flex gap-1 m-0 items-center">
         ${repeat(

packages/comment-widget/src/reply-item.ts

@@ -159,7 +159,7 @@ export class ReplyItem extends LitElement {
                 slot="pre-content"
                 @mouseenter=${() => this.handleSetActiveQuoteReply(this.quoteReply)}
                 @mouseleave=${() => this.handleSetActiveQuoteReply()}
-                class="quote-badge cursor-pointer inline-flex items-center gap-1 px-2.5 py-2 rounded-base bg-muted-3 text-text-2 hover:-translate-y-0.5 hover:text-text-1 hover:bg-muted-2 transition-all mb-1 text-xs font-medium"
+                class="quote-badge cursor-pointer inline-flex items-center gap-1 px-2.5 py-2 rounded-base bg-muted-3 text-text-2 hover:-translate-y-0.5 hover:text-text-1 hover:bg-muted-2 transition-all text-xs font-medium"
                 ><i class="i-ic:round-reply"></i><span>${this.quoteReply?.owner.displayName}</span>
               </span>
               <br slot="pre-content" />`

packages/comment-widget/src/styles/content.css

@@ -1,6 +1,6 @@
 .content {
   word-wrap: break-word;
-  @apply text-text-1 text-sm;
+  @apply text-text-1 text-sm leading-relaxed;
 }
 
 .content details,