From 211266c0725dde354777425a1fe571e9bd1dddf8 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Sat, 9 Jul 2022 13:37:06 +0200
Subject: [PATCH] [bugfix] Fix display names in thread view causing wrapping
 issues on small screens (#698)

* use account.Acct for username

* allow username + displayname to wrap with ellipses

* use span 2 for displayname always

* remove commented-out line
---
 web/source/css/status.css | 15 +++++++++------
 web/template/status.tmpl  |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/web/source/css/status.css b/web/source/css/status.css
index 3f4b08edf..b0567c7ce 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -61,25 +61,32 @@ main {
 			object-fit: cover;
 			background: $bg;
 			border: 0.1rem solid $acc2;
-			/* box-sizing: border-box; */
 			border-radius: calc($br / 1.5);
 		}
 	}
 	
 	.displayname {
+		grid-column: span 2;
 		font-weight: bold;
 		font-size: 1.2rem;
 		line-height: 2rem;
 		margin-top: -0.5rem;
 		align-self: start;
+
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 	
 	.username {
 		color: $link_fg;
 		line-height: 2rem;
 		margin-top: -0.5rem;
-		justify-self: start;
 		align-self: start;
+		
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	input.spoiler:checked ~ .content {
@@ -250,10 +257,6 @@ main {
 		background: $status_focus_bg;
 		padding-bottom: 0;
 
-		.displayname {
-			grid-column: span 2;
-		}
-
 		.text {
 			margin-top: 0;
 			grid-column: span 3;
diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index f03fdbef6..c477428fc 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -1,7 +1,7 @@
 <div class="contentgrid">
 	<a href="{{.Account.URL}}" class="avatar"><img src="{{.Account.Avatar}}" alt=""></a>
 	<a href="{{.Account.URL}}" class="displayname">{{if .Account.DisplayName}}{{.Account.DisplayName}}{{else}}{{.Account.Username}}{{end}}</a>
-	<a href="{{.Account.URL}}" class="username">@{{.Account.Username}}</a>
+	<a href="{{.Account.URL}}" class="username">@{{.Account.Acct}}</a>
 	<div class="text">
 		{{if .SpoilerText}}
 		<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />