From 8e68970258c38f0ed52796be4d9a447f268bed9c Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Sat, 9 Jul 2022 13:36:56 +0200
Subject: [PATCH] [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 | 15 ++++++++++++---
 web/template/status.tmpl  |  3 ++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/web/source/css/status.css b/web/source/css/status.css
index db56b7a50..3f4b08edf 100644
--- a/web/source/css/status.css
+++ b/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;
diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index a6dcc30f8..f03fdbef6 100644
--- a/web/template/status.tmpl
+++ b/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">