From d90dc2d77fd813257e24a45456cb6b10791999e6 Mon Sep 17 00:00:00 2001
From: Vincent Ambo <mail@tazj.in>
Date: Tue, 22 May 2018 10:17:34 +0200
Subject: fix(templates): Fix layout of user info on desktop view

---
 static/styles.css     | 10 ++++++++--
 templates/thread.html |  5 ++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index b2a16b7a6473..b57fd899ea8d 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -95,10 +95,16 @@ html, body {
   max-width: 860px;
 }
 .converse .mdl-card .avatar-card {
-    margin-left: auto;
-    margin-right: auto;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
     margin-top: 30px;
 }
+.desktop-avatar {
+    width: 80px;
+    margin-right: auto;
+    margin-left: auto;
+}
 .mobile-avatar {
     width: 30px;
     border-radius: 8px;
diff --git a/templates/thread.html b/templates/thread.html
index c3902a456f9b..bd6d031bc2ba 100644
--- a/templates/thread.html
+++ b/templates/thread.html
@@ -38,9 +38,8 @@
                         {# card to display avatars on desktop #}
                         <div class="mdl-card mdl-shadow--2dp mdl-cell--2-col mdl-cell--hide-phone mdl-cell--hide-tablet avatar-box">
                             <div class="avatar-card">
-                                <img src="https://www.gravatar.com/avatar/{{ post.author_gravatar }}?d=monsterid&s=160" style="width: 80px;"/>
-                                <br>
-                                <span class="user-name">{{ post.author_name }}</span>
+                                <img class="desktop-avatar" src="https://www.gravatar.com/avatar/{{ post.author_gravatar }}?d=monsterid&s=160" />
+                                <p class="user-name">{{ post.author_name }}</p>
                             </div>
                         </div>
                         {# card for main post content #}
-- 
cgit 1.4.1