Show avatars in quotes, improve css

src/sass/profile/_base.scss

@@ -57,6 +57,10 @@
 
         .timeline-container {
             width: 100% !important;
+
+            .tab-item wide {
+                flex-grow: 1.4;
+            }
         }
     }
 

src/sass/tweet/_base.scss

@@ -96,14 +96,17 @@
     border-radius: 50%;
 }
 
+.avatar.mini {
+    margin-right: 5px;
+    margin-top: -1px;
+    width: 20px;
+    height: 20px;
+}
+
 .attribution {
     display: flex;
     pointer-events: all;
-    margin: 10px 0;
-
-    .avatar {
-        margin-right: 5px;
-    }
+    margin: 5px 0;
 
     strong {
         color: var(--fg_color);

src/sass/tweet/quote.scss

@@ -19,23 +19,24 @@
     }
 
     .tweet-name-row {
-        padding: 4px 6px;
+        padding: 6px 8px;
+        margin-top: 1px;
     }
 
     .quote-text {
         overflow: hidden;
         white-space: pre-wrap;
         word-wrap: break-word;
-        padding: 0px 6px 6px 6px;
+        padding: 0px 8px 8px 8px;
     }
 
     .show-thread {
-        padding: 0px 6px 3px 6px;
-        margin-top: -3px;
+        padding: 0px 8px 6px 8px;
+        margin-top: -6px;
     }
 
     .replying-to {
-        padding: 0px 6px;
+        padding: 0px 8px;
         margin: unset;
     }
 }

src/views/tweet.nim

@@ -10,6 +10,11 @@ proc getSmallPic(url: string): string =
     result &= ":small"
   result = getPicUrl(result)
 
+proc renderMiniAvatar(profile: Profile): VNode =
+  let url = getPicUrl(profile.getUserpic("_mini"))
+  buildHtml():
+    img(class="avatar mini", src=url)
+
 proc renderHeader(tweet: Tweet; retweet=""): VNode =
   buildHtml(tdiv):
     if retweet.len > 0:
@@ -189,9 +194,8 @@ proc renderReply(tweet: Tweet): VNode =
       a(href=("/" & u)): text "@" & u
 
 proc renderAttribution(profile: Profile): VNode =
-  let avatarUrl = getPicUrl(profile.getUserpic("_200x200"))
   buildHtml(a(class="attribution", href=("/" & profile.username))):
-    img(class="avatar", width="20", height="20", src=avatarUrl)
+    renderMiniAvatar(profile)
     strong: text profile.fullname
 
 proc renderMediaTags(tags: seq[Profile]): VNode =
@@ -207,7 +211,6 @@ proc renderQuoteMedia(quote: Tweet; prefs: Prefs; path: string): VNode =
   buildHtml(tdiv(class="quote-media-container")):
     if quote.photos.len > 0:
       renderAlbum(quote)
-      # genImg(quote.photos[0])
     elif quote.video.isSome:
       renderVideo(quote.video.get(), prefs, path)
     elif quote.gif.isSome:
@@ -227,6 +230,7 @@ proc renderQuote(quote: Tweet; prefs: Prefs; path: string): VNode =
 
     tdiv(class="tweet-name-row"):
       tdiv(class="fullname-and-username"):
+        renderMiniAvatar(quote.profile)
         linkUser(quote.profile, class="fullname")
         linkUser(quote.profile, class="username")