diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/source/css/status.css | 87 | ||||
| -rw-r--r-- | web/source/settings/components/status.tsx | 6 | ||||
| -rw-r--r-- | web/template/status.tmpl | 4 |
3 files changed, 50 insertions, 47 deletions
diff --git a/web/source/css/status.css b/web/source/css/status.css index 8ab0471fb..5938919f5 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -141,15 +141,10 @@ main { } } - .text { - margin: 0; - grid-row: span 1; - grid-column: 1 / span 3; - - display: flex; - flex-direction: column; - gap: 0.5rem; - + .text > .content, + .text-spoiler > summary > .spoiler-content { + word-break: break-word; + line-height: 1.6rem; width: 100%; a { @@ -157,45 +152,51 @@ main { text-decoration: underline; } - .content { - word-break: break-word; - line-height: 1.6rem; - width: 100%; - - /* - Normalize header sizes to fit better - with the line-height we use for statuses. - */ - h1 { - margin: 0; - font-size: 1.8rem; - line-height: initial; - } + /* + Normalize header sizes to fit better + with the line-height we use for statuses. + */ + h1 { + margin: 0; + font-size: 1.8rem; + line-height: initial; + } - h2 { - margin: 0; - font-size: 1.6rem; - line-height: initial; - } + h2 { + margin: 0; + font-size: 1.6rem; + line-height: initial; + } - h3 { - margin: 0; - font-size: 1.4rem; - line-height: initial; - } + h3 { + margin: 0; + font-size: 1.4rem; + line-height: initial; + } - h4 { - margin: 0; - font-size: 1.2rem; - line-height: initial; - } + h4 { + margin: 0; + font-size: 1.2rem; + line-height: initial; + } - h5 { - margin: 0; - font-size: 1rem; - line-height: initial; - } + h5 { + margin: 0; + font-size: 1rem; + line-height: initial; } + } + + .text { + margin: 0; + grid-row: span 1; + grid-column: 1 / span 3; + + display: flex; + flex-direction: column; + gap: 0.5rem; + + width: 100%; .poll { background-color: $gray2; diff --git a/web/source/settings/components/status.tsx b/web/source/settings/components/status.tsx index d2116e60d..ec7af3ad3 100644 --- a/web/source/settings/components/status.tsx +++ b/web/source/settings/components/status.tsx @@ -126,15 +126,15 @@ function StatusBody({ status }: { status: StatusType }) { <div className="status-body"> <details className="text-spoiler"> <summary> - <span - className="spoiler-text" + <div + className="spoiler-content" lang={status.language} > { status.spoiler_text ? status.spoiler_text + " " : "[no content warning set] " } - </span> + </div> <span className="button" role="button" diff --git a/web/template/status.tmpl b/web/template/status.tmpl index ca956e8a7..85000fd72 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -38,7 +38,9 @@ {{- if .SpoilerText }} <details class="text-spoiler"> <summary> - <span class="spoiler-text p-summary" lang="{{- .LanguageTag.TagStr -}}">{{- emojify .Emojis (escape .SpoilerText) -}}</span> + <div class="spoiler-content p-summary" lang="{{- .LanguageTag.TagStr -}}"> + {{ noescape .SpoilerContent | emojify .Emojis }} + </div> <span class="button" role="button" tabindex="0">Toggle visibility</span> </summary> <div class="text"> |