From 10b8d270f2f9f6770772c5786908591c5db1152d Mon Sep 17 00:00:00 2001 From: tobi Date: Tue, 16 Sep 2025 13:00:30 +0200 Subject: [PATCH] [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 Co-committed-by: tobi --- testrig/testmodels.go | 2 +- web/source/css/_media-wrapper.css | 32 +++++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/testrig/testmodels.go b/testrig/testmodels.go index 256107b80..2c0cc70c7 100644 --- a/testrig/testmodels.go +++ b/testrig/testmodels.go @@ -1014,7 +1014,7 @@ func NewTestAttachments() map[string]*gtsmodel.MediaAttachment { }, }, AccountID: "01F8MH1H7YV1Z7D2C8K2730QBF", - Description: "This is a track from Nine Inch Nail's \"Ghosts I-V\" album. This is the third track from \"Ghosts II\".", + Description: "This is a track from Nine Inch Nails' \"Ghosts I-V\" album.\n\nThis is the third track from \"Ghosts II\".", ScheduledStatusID: "", Blurhash: "LZDJO?ayIUof01j[xuayxuayayj[", Processing: 2, 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; +}