[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

@@ -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;

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" />