gtsocial-umbx

commit 8e68970258c38f0ed52796be4d9a447f268bed9c
parent c2039a7e5ef0abc6f3ad019cf4f2f33681bef3c2
Author: tobi <31960611+tsmethurst@users.noreply.github.com>
Date:   Sat,  9 Jul 2022 13:36:56 +0200

[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
Diffstat:
M
web/source/css/status.css
 | 
15
++++++++++++---
M
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
@@ -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
@@ -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">