[chore] Fix report username wrapping (#1464)

* fix report username wrapping

* move report status to separate line on portrait orientation

1 files changed, 22 insertions, 1 deletions

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index 17ccec6d3..53fb0dd8a 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -828,9 +828,14 @@ button.with-padding {
 		border: none;
 		border-left: 0.3rem solid $border-accent;
 
+		.usernames {
+			line-height: 2rem;
+		}
+
 		.byline {
 			display: grid;
 			grid-template-columns: 1fr auto;
+			gap: 0.5rem;
 
 			.status {
 				color: $border-accent;
@@ -904,14 +909,20 @@ button.with-padding {
 	}
 
 	.user {
+		line-height: 1.3rem;
+		display: inline-block;
 		background: $fg-accent;
 		color: $bg;
 		border-radius: $br;
-		padding: 0.1rem 0.2rem;
+		padding: 0.15rem 0.15rem;
 		margin: 0 0.1rem;
 		font-weight: bold;
 		text-decoration: none;
 
+		.acct {
+			word-break: break-all;
+		}
+
 		&.suspended {
 			background: $bg-accent;
 			color: $fg;
@@ -924,6 +935,16 @@ button.with-padding {
 	}
 }
 
+@media screen and (orientation: portrait) {
+	.reports .report .byline {
+		grid-template-columns: 1fr;
+
+		.status {
+			grid-row: 1;
+		}
+	}
+}
+
 [role="button"] {
 	cursor: pointer;
 }