diff options
| author |  tobi <31960611+tsmethurst@users.noreply.github.com> | 2022-07-09 13:37:06 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com> | 2022-07-09 13:37:06 +0200 |
| commit | 211266c0725dde354777425a1fe571e9bd1dddf8 (patch) | |
| tree | ba7d276b93c4d0f24f6de7fb1badff99a7c4ed9a | |
| parent | [frontend] Fix up status 'show more' and z-index (#701) (diff) | |
| download | gotosocial-211266c0725dde354777425a1fe571e9bd1dddf8.tar.xz | |
[bugfix] Fix display names in thread view causing wrapping issues on small screens (#698)
* use account.Acct for username
* allow username + displayname to wrap with ellipses
* use span 2 for displayname always
* remove commented-out line
| -rw-r--r-- | web/source/css/status.css | 15 | ||||
| -rw-r--r-- | web/template/status.tmpl | 2 |
2 files changed, 10 insertions, 7 deletions
diff --git a/web/source/css/status.css b/web/source/css/status.css index 3f4b08edf..b0567c7ce 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -61,25 +61,32 @@ main { object-fit: cover; background: $bg; border: 0.1rem solid $acc2; - /* box-sizing: border-box; */ border-radius: calc($br / 1.5); } } .displayname { + grid-column: span 2; font-weight: bold; font-size: 1.2rem; line-height: 2rem; margin-top: -0.5rem; align-self: start; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .username { color: $link_fg; line-height: 2rem; margin-top: -0.5rem; - justify-self: start; align-self: start; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } input.spoiler:checked ~ .content { @@ -250,10 +257,6 @@ main { background: $status_focus_bg; padding-bottom: 0; - .displayname { - grid-column: span 2; - } - .text { margin-top: 0; grid-column: span 3; diff --git a/web/template/status.tmpl b/web/template/status.tmpl index f03fdbef6..c477428fc 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -1,7 +1,7 @@ <div class="contentgrid"> <a href="{{.Account.URL}}" class="avatar"><img src="{{.Account.Avatar}}" alt=""></a> <a href="{{.Account.URL}}" class="displayname">{{if .Account.DisplayName}}{{.Account.DisplayName}}{{else}}{{.Account.Username}}{{end}}</a> - <a href="{{.Account.URL}}" class="username">@{{.Account.Username}}</a> + <a href="{{.Account.URL}}" class="username">@{{.Account.Acct}}</a> <div class="text"> {{if .SpoilerText}} <input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" /> |