Fix live UI

Author: moysa

src/pages/StreamPage.module.scss

@@ -155,26 +155,34 @@
   gap: 16px;
   padding: 8px;
   height: calc(100dvh - 154px);
-  overflow-y: scroll;
+  overflow: hidden;
+
+  &:hover {
+    width: calc(100% + 6px);
+    overflow-y: scroll;
+  }
+
 }
 
 .liveMessage {
   display: flex;
   gap: 8px;
+  padding-left: 9px;
 
   .leftSide {
     width: 24px;
   }
 
   .rightSide {
+    line-height: 20px;
     .authorName {
       color: var(--text-primary);
       font-size: 16px;
       font-weight: 700;
       line-height: 16px;
       width: fit-content;
       margin-right: 4px;
-      display: flex;
+      /* display: flex; */
       gap: 4px;
 
       >span {
@@ -212,20 +220,22 @@
 
   &.zapMessage {
     width: 100%;
-    padding-block: 10px;
+    padding-block: 8px;
     padding-inline: 8px;
     border-radius: 8px;
     border: 1px solid #E47C00;
     background: rgba(228, 124, 0, 0.20);
 
     .rightSide {
       width: 100%;
+      line-height: 20px;
 
       .zapInfo {
         display: flex;
         width: 100%;
         justify-content: space-between;
         align-items: center;
+        margin-bottom: 4px;
       }
 
       .authorName {
@@ -394,17 +404,21 @@
   .zapStats {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    justify-content: flex-end;
+    gap: 8px;
 
     .zapButton {
       width: 100%;
+      height: 32px;
     }
 
     .statsLine {
       display: flex;
       min-width: 180px;
       align-items: center;
       gap: 8px;
+      padding-inline: 8px;
+      padding-block: 11px;
 
       .totalZaps {
         color: var(--text-secondary);
@@ -448,21 +462,21 @@
 
   .firstZapAmount {
     color: var(--text-primary);
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 700;
     line-height: 18px;
   }
 
   .zapAmount {
     color: var(--text-secondary);
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 400;
     line-height: 18px;
   }
 
   .zapMessage {
     color: var(--text-secondary);
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 400;
     line-height: 18px;
   }

src/pages/StreamPage.tsx

@@ -289,17 +289,13 @@ const StreamPage: Component = () => {
       <div class={styles.liveMessage}>
         <Show when={author(event.pubkey)}>
           <div class={styles.leftSide}>
-            <Avatar user={author(event.pubkey)} size="micro" />
+            <Avatar user={author(event.pubkey)} size="xss" />
           </div>
         </Show>
         <div class={styles.rightSide}>
           <Show when={author(event.pubkey)}>
             <span class={styles.authorName}>
               {userName(author(event.pubkey))}
-              <VerificationCheck
-                user={author(event.pubkey)}
-                inline={true}
-              />
             </span>
           </Show>
           <span class={styles.messageContent}>
@@ -317,18 +313,14 @@ const StreamPage: Component = () => {
     return (
       <div class={`${styles.liveMessage} ${styles.zapMessage}`}>
         <div class={styles.leftSide}>
-          <Avatar user={author(zap.sender as string)} size="micro" />
+          <Avatar user={author(zap.sender as string)} size="xss" />
         </div>
         <div class={styles.rightSide}>
           <span class={styles.zapInfo}>
             <span class={styles.authorName}>
               <span>
                 {userName(author(zap.sender as string), zap.sender as string)}
               </span>
-              <VerificationCheck
-                user={author(zap.sender as string)}
-                inline={true}
-              />
               <span class={styles.zapped}>
                 zapped
               </span>
@@ -375,7 +367,7 @@ const StreamPage: Component = () => {
         fallback={<TopZapSkeleton />}
       >
         <div class={styles.topZap}>
-          <Avatar user={author(zap?.sender as string)} size="micro" />
+          <Avatar user={author(zap?.sender as string)} size="vvs" />
           <div class={styles.amount}>
             <div class={styles.zapIcon}></div>
             <div class={styles.firstZapAmount}>{humanizeNumber(zap?.amount)}</div>
@@ -389,7 +381,7 @@ const StreamPage: Component = () => {
   }
 
   const renderRestZaps = () => {
-    const zaps = topZaps().slice(1, 6);
+    const zaps = topZaps().slice(1, 5);
 
     return <div class={styles.restZaps}>
       <For each={zaps}>