[frontend] Basic user moderation actions (#1728)

* remove info banner

* update swagger definition for AccountAction

* basic user view, suspend action

* clean up suspended user display

* basic user searching

* rename User -> Account for clarity

* refactor error boundary component to give better info

* appease the linter

web/source/settings/style.css

@@ -61,6 +61,7 @@ header {
 		background: $bg-accent;
 		padding: 2rem;
 		border-radius: $br;
+		max-width: 100%;
 
 		& > div, & > form {
 			border-left: 0.2rem solid $border-accent;
@@ -92,6 +93,10 @@ header {
 				padding-left: 0;
 			}
 		}
+
+		& > .error {
+			display: grid; /* prevents error overflowing */
+		}
 	}
 
 	.sidebar {
@@ -250,11 +255,20 @@ input, select, textarea {
 	font-weight: bold;
 	padding: 0.5rem;
 	white-space: pre-wrap;
+	position: relative;
 
 	a {
 		color: $error-link;
 	}
 
+	.details {
+		max-width: 100%;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
 	pre {
 		background: $bg;
 		color: $fg;
@@ -395,6 +409,7 @@ section.with-sidebar > div, section.with-sidebar > form {
 .user-profile {
 	.overview {
 		display: grid;
+		max-width: 60rem;
 		grid-template-columns: 70% 30%;
 		grid-template-rows: 100%;
 		gap: 1rem;
@@ -1062,6 +1077,42 @@ button.with-padding {
 	}
 }
 
+.account-search {
+	form {
+		margin-bottom: 1rem;
+	}
+
+	.list {
+		margin: 0.5rem 0;
+
+		a {
+			color: $fg;
+			text-decoration: none;
+
+			#username {
+				color: $link-fg;
+				margin-left: 0.5em;
+			}
+		}
+	}
+}
+
+.account-detail {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+
+	.profile {
+		overflow: hidden;
+		max-width: 60rem;
+	}
+
+	.action-buttons {
+		display: flex;
+		gap: 0.5rem;
+	}
+}
+
 @media screen and (orientation: portrait) {
 	.reports .report .byline {
 		grid-template-columns: 1fr;