[bugfix/frontend] preserve whitespace in photoswipe captions (#4434)

This PR fixes https://codeberg.org/superseriousbusiness/gotosocial/issues/4382 by updating the photoswipe caption plugin CSS to include whitespace. Thanks @olivergeer for the fix. It also updates the padding + width in "aside" mode to increase the chances of a visitor being able to read an entire caption, in lieu of https://codeberg.org/superseriousbusiness/gotosocial/issues/4413 being fixable.

Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4434
Co-authored-by: tobi <tobi.smethurst@protonmail.com>
Co-committed-by: tobi <tobi.smethurst@protonmail.com>

1 files changed, 32 insertions, 0 deletions

diff --git a/web/source/css/_media-wrapper.css b/web/source/css/_media-wrapper.css
index b8541df4b..856129f17 100644
--- a/web/source/css/_media-wrapper.css
+++ b/web/source/css/_media-wrapper.css
@@ -271,6 +271,10 @@
 	}
 }
 
+/*
+	Style the "open post" link in the top
+	right corner of the photoswipe lightbox.
+*/
 .pswp__button--open-post-link {
 	display: flex;
 	align-items: center;
@@ -283,6 +287,10 @@
 	}
 }
 
+/*
+	Style the plyr video thingy both in
+	and out of the photoswipe lightbox.
+*/
 .plyr--video {
 	flex-direction: column-reverse;
 
@@ -367,3 +375,27 @@
 		display: flex;
 	}
 }
+
+/*
+	Preserve whitespace in
+	photoswipe captions.
+*/
+.pswp__dynamic-caption {
+  white-space: pre-wrap;
+}
+
+.pswp__dynamic-caption--aside {
+	/*
+		Remove unnecessary padding
+		in "normal" width when caption
+		is rendered on the right side.
+	*/
+	padding: 0;
+
+	/*
+		Let it have a bit more width if it
+		wants, to increase the chance of user
+		being able to see the whole caption.
+	*/
+	max-width: 30rem;
+}