From bf69f4d89c4935fe3e21fb211b923620d040bb92 Mon Sep 17 00:00:00 2001
From: f0x <f0x@cthu.lu>
Date: Wed, 8 Feb 2023 19:25:13 +0100
Subject: [PATCH 1/2] fix report username wrapping

---
 web/source/settings/admin/reports/detail.jsx   |  2 +-
 web/source/settings/admin/reports/index.jsx    |  2 +-
 web/source/settings/admin/reports/username.jsx |  4 ++--
 web/source/settings/style.css                  | 13 ++++++++++++-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/web/source/settings/admin/reports/detail.jsx b/web/source/settings/admin/reports/detail.jsx
index 20548a7209..33464824cc 100644
--- a/web/source/settings/admin/reports/detail.jsx
+++ b/web/source/settings/admin/reports/detail.jsx
@@ -60,7 +60,7 @@ function ReportDetailForm({ data: report }) {
 
 	return (
 		<div className="report detail">
-			<div>
+			<div className="usernames">
 				<Username user={from} /> reported <Username user={target} />
 			</div>
 
diff --git a/web/source/settings/admin/reports/index.jsx b/web/source/settings/admin/reports/index.jsx
index 61483b0d60..61841d1803 100644
--- a/web/source/settings/admin/reports/index.jsx
+++ b/web/source/settings/admin/reports/index.jsx
@@ -89,7 +89,7 @@ function ReportEntry({ report }) {
 		<Link to={`${baseUrl}/${report.id}`}>
 			<a className={`report entry${report.action_taken ? " resolved" : ""}`}>
 				<div className="byline">
-					<div className="users">
+					<div className="usernames">
 						<Username user={from} link={false} /> reported <Username user={target} link={false} />
 					</div>
 					<h3 className="status">
diff --git a/web/source/settings/admin/reports/username.jsx b/web/source/settings/admin/reports/username.jsx
index 5eeea43109..1680e702b7 100644
--- a/web/source/settings/admin/reports/username.jsx
+++ b/web/source/settings/admin/reports/username.jsx
@@ -36,7 +36,7 @@ module.exports = function Username({ user, link = true }) {
 		? { fa: "fa-home", info: "Local user" }
 		: { fa: "fa-external-link-square", info: "Remote user" };
 
-	let Element = "span";
+	let Element = "div";
 	let href = null;
 
 	if (link) {
@@ -46,7 +46,7 @@ module.exports = function Username({ user, link = true }) {
 
 	return (
 		<Element className={className} href={href} target="_blank" rel="noreferrer" >
-			@{user.account.acct}
+			<span className="acct">@{user.account.acct}</span>
 			<i className={`fa fa-fw ${icon.fa}`} aria-hidden="true" title={icon.info} />
 			<span className="sr-only">{icon.info}</span>
 		</Element>
diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index 17ccec6d3a..a03c111623 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -828,12 +828,17 @@ button.with-padding {
 		border: none;
 		border-left: 0.3rem solid $border-accent;
 
+		.usernames {
+			line-height: 2rem;
+		}
+
 		.byline {
 			display: grid;
 			grid-template-columns: 1fr auto;
 
 			.status {
 				color: $border-accent;
+				margin-left: 0.5rem;
 			}
 		}
 
@@ -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;

From f11faa2480fa219520c7a41b61a36a0b492d32de Mon Sep 17 00:00:00 2001
From: f0x <f0x@cthu.lu>
Date: Wed, 8 Feb 2023 19:28:56 +0100
Subject: [PATCH 2/2] move report status to separate line on portrait
 orientation

---
 web/source/settings/style.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index a03c111623..53fb0dd8a6 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -835,10 +835,10 @@ button.with-padding {
 		.byline {
 			display: grid;
 			grid-template-columns: 1fr auto;
+			gap: 0.5rem;
 
 			.status {
 				color: $border-accent;
-				margin-left: 0.5rem;
 			}
 		}
 
@@ -935,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;
 }