Fix image/gif properly

public/style.css

@@ -67,7 +67,7 @@ a:hover {
     padding: 0;
     vertical-align: bottom;
     flex-basis: 100%;
-    margin-bottom: .5em;
+    margin-bottom: .2em;
 }
 
 .media-heading a {
@@ -200,7 +200,7 @@ nav {
 }
 
 .attachments {
-    margin-top: .5em;
+    margin-top: .35em;
     display: flex;
     flex-direction: row;
     width: 100%;
@@ -257,7 +257,7 @@ video {
 }
 
 .media-gif {
-    display: table-cell;
+    display: inline-block;
     background-color: unset;
 }
 
@@ -294,6 +294,15 @@ video {
     flex-basis: 300px;
 }
 
+.image {
+    display: inline-block;
+}
+
+.single-image {
+    display: inline-block;
+    width: unset;
+}
+
 .avatar {
     float: left;
     margin-top: 3px;

src/views/tweet.nimf

@@ -63,9 +63,9 @@
 #
 #proc renderMediaGroup(tweet: Tweet): string =
 #let groups = if tweet.photos.len > 2: tweet.photos.distribute(2) else: @[tweet.photos]
-#let display = if groups.len == 1 and groups[0].len == 1: "display: table-cell;" else: ""
+#let class = if groups.len == 1 and groups[0].len == 1: "single-image" else: ""
 #var first = true
-<div class="attachments" style="${display}">
+<div class="attachments ${class}">
 #for photos in groups:
   #let margin = if not first: "margin-top: .25em;" else: ""
   #let flex = if photos.len > 1 or groups.len > 1: "display: flex;" else: ""