[frontend] Fix up status 'show more' and z-index (#701)

* put spoiler items in a flexbox

* make the whole status top of z index
this allows text to be selected properly

* allow status spoiler text to break across lines

web/source/css/status.css

@@ -87,11 +87,17 @@ main {
 	}
 
 	.spoiler {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 0.4rem;
+
+		.spoiler-text {
+			word-break: break-word;
+		}
+
 		label {
 			padding: 0.2rem 0.3rem;
-			margin-left: 0.4rem;
-			position: relative;
-			z-index: 2;
 			cursor: pointer;
 			font-size: 1rem;
 		}
@@ -104,6 +110,9 @@ main {
 		margin-top: 0.5rem;
 		grid-column: span 2;
 
+		position: relative;
+		z-index: 2;
+
 		a {
 			color: $link_fg;
 			text-decoration: underline;

web/template/status.tmpl

@@ -6,7 +6,8 @@
 		{{if .SpoilerText}}
 		<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />
 		<div class="spoiler">
-			<span>{{.SpoilerText}}</span><label class="button spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label>
+			<span class="spoiler-text">{{.SpoilerText}}</span>
+			<label class="button spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label>
 		</div>
 		{{end}}
 		<div class="content">