show zaps total in zaps tab

src/Element/FollowListBase.tsx

@@ -16,7 +16,7 @@ export default function FollowListBase({ pubkeys, title }: FollowListBaseProps)
 
     return (
         <div className="main-content">
-            <div className="flex mt10">
+            <div className="flex mt10 mb10">
                 <div className="f-grow bold">{title}</div>
                 <button className="transparent" type="button" onClick={() => followAll()}>Follow All</button>
             </div>

src/Element/Zap.css

@@ -2,17 +2,26 @@
   min-height: unset;
 }
 
+.zap .header .pfp {
+  overflow: hidden;
+}
+
+.zap .header {
+  flex-direction: row;
+}
+
+.zap .header .amount {
+  font-size: 32px;
+}
+
+.zap .header .pfp {
+  max-width: 72%;
+}
+
 @media (max-width: 520px) {
-  .zap .header {
-    flex-direction: column;
-  }
   .zap .header .pfp {
-    width: 100%;
     padding: 4px;
   }
-  .zap .header .amount {
-    font-size: 32px;
-  }
 }
 
 .zap .summary {
@@ -76,10 +85,6 @@
   content: ", ";
 }
 
-.note.zap > .header {
-  align-items: center;
-}
-
 .note.zap > .body {
   margin-bottom: 0;
 }

src/Pages/ProfilePage.tsx

@@ -123,7 +123,7 @@ export default function ProfilePage() {
       case ProfileTab.Zaps: {
         return (
           <div className="main-content">
-            <h4>{formatShort(zapsTotal)} sats</h4>
+            <h4 className="zaps-total">{formatShort(zapsTotal)} sats</h4>
             {zaps.map(z => <ZapElement showZapped={false} zap={z} />)}
           </div>
         )

src/index.css

@@ -539,3 +539,11 @@ body.scroll-lock {
 .bold {
   font-weight: 700;
 }
+
+.main-content .h4 {
+  margin-bottom: 25px;
+}
+
+.main-content .profile-preview {
+  margin-bottom: 16px;
+}