From 58f6a3e17990d44d6e0cf17e4f1e6be114015d1f Mon Sep 17 00:00:00 2001
From: Maurice Parker <mo@vincode.io>
Date: Thu, 13 Aug 2020 11:27:21 -0500
Subject: [PATCH] Update the Twitter User layout

---
 .../Account/FeedProvider/Twitter/TwitterUser.swift       | 5 +++--
 Shared/Article Rendering/shared.css                      | 9 +++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/Account/Sources/Account/FeedProvider/Twitter/TwitterUser.swift b/Account/Sources/Account/FeedProvider/Twitter/TwitterUser.swift
index 58806431c..832f0b3ee 100644
--- a/Account/Sources/Account/FeedProvider/Twitter/TwitterUser.swift
+++ b/Account/Sources/Account/FeedProvider/Twitter/TwitterUser.swift
@@ -30,14 +30,15 @@ struct TwitterUser: Codable {
 		if let avatarURL = avatarURL {
 			html += "<img class=\"twitterAvatar\" src=\"\(avatarURL)\">"
 		}
-		html += "<span class=\"twitterUsername\">"
+		html += "<div class=\"twitterUsername\">"
 		if let name = name {
 			html += " \(name)"
 		}
+		html += "<br><span class=\"twitterScreenName\">"
 		if let screenName = screenName {
 			html += " @\(screenName)"
 		}
-		html += "</span></a></div>"
+		html += "</span></div></a></div>"
 		return html
 	}
 	
diff --git a/Shared/Article Rendering/shared.css b/Shared/Article Rendering/shared.css
index 1e30f911b..bc0a5686b 100644
--- a/Shared/Article Rendering/shared.css	
+++ b/Shared/Article Rendering/shared.css	
@@ -241,16 +241,21 @@ blockquote {
 .twitterAvatar {
 	vertical-align: middle;
 	border-radius: 4px;
-	height: 24px;
-	width: 24px;
+	height: 1.7em;
+	width: 1.7em;
 }
 
 .twitterUsername {
+	line-height: 1.2;
 	margin-left: 4px;
 	display: inline-block;
 	vertical-align: middle;
 }
 
+.twitterScreenName {
+	font-size: 66%;
+}
+
 .twitterTimestamp {
 	font-size: 66%;
 }