diff options
| -rw-r--r-- | web/source/settings/admin/reports/detail.jsx | 2 | ||||
| -rw-r--r-- | web/source/settings/admin/reports/index.jsx | 2 | ||||
| -rw-r--r-- | web/source/settings/admin/reports/username.jsx | 4 | ||||
| -rw-r--r-- | web/source/settings/style.css | 23 |
4 files changed, 26 insertions, 5 deletions
diff --git a/web/source/settings/admin/reports/detail.jsx b/web/source/settings/admin/reports/detail.jsx index 20548a720..33464824c 100644 --- a/web/source/settings/admin/reports/detail.jsx +++ b/web/source/settings/admin/reports/detail.jsx @@ -60,7 +60,7 @@ function ReportDetailForm({ data: report }) { return ( <div className="report detail"> - <div> + <div className="usernames"> <Username user={from} /> reported <Username user={target} /> </div> diff --git a/web/source/settings/admin/reports/index.jsx b/web/source/settings/admin/reports/index.jsx index 61483b0d6..61841d180 100644 --- a/web/source/settings/admin/reports/index.jsx +++ b/web/source/settings/admin/reports/index.jsx @@ -89,7 +89,7 @@ function ReportEntry({ report }) { <Link to={`${baseUrl}/${report.id}`}> <a className={`report entry${report.action_taken ? " resolved" : ""}`}> <div className="byline"> - <div className="users"> + <div className="usernames"> <Username user={from} link={false} /> reported <Username user={target} link={false} /> </div> <h3 className="status"> diff --git a/web/source/settings/admin/reports/username.jsx b/web/source/settings/admin/reports/username.jsx index 5eeea4310..1680e702b 100644 --- a/web/source/settings/admin/reports/username.jsx +++ b/web/source/settings/admin/reports/username.jsx @@ -36,7 +36,7 @@ module.exports = function Username({ user, link = true }) { ? { fa: "fa-home", info: "Local user" } : { fa: "fa-external-link-square", info: "Remote user" }; - let Element = "span"; + let Element = "div"; let href = null; if (link) { @@ -46,7 +46,7 @@ module.exports = function Username({ user, link = true }) { return ( <Element className={className} href={href} target="_blank" rel="noreferrer" > - @{user.account.acct} + <span className="acct">@{user.account.acct}</span> <i className={`fa fa-fw ${icon.fa}`} aria-hidden="true" title={icon.info} /> <span className="sr-only">{icon.info}</span> </Element> diff --git a/web/source/settings/style.css b/web/source/settings/style.css index 17ccec6d3..53fb0dd8a 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -828,9 +828,14 @@ button.with-padding { border: none; border-left: 0.3rem solid $border-accent; + .usernames { + line-height: 2rem; + } + .byline { display: grid; grid-template-columns: 1fr auto; + gap: 0.5rem; .status { color: $border-accent; @@ -904,14 +909,20 @@ button.with-padding { } .user { + line-height: 1.3rem; + display: inline-block; background: $fg-accent; color: $bg; border-radius: $br; - padding: 0.1rem 0.2rem; + padding: 0.15rem 0.15rem; margin: 0 0.1rem; font-weight: bold; text-decoration: none; + .acct { + word-break: break-all; + } + &.suspended { background: $bg-accent; color: $fg; @@ -924,6 +935,16 @@ button.with-padding { } } +@media screen and (orientation: portrait) { + .reports .report .byline { + grid-template-columns: 1fr; + + .status { + grid-row: 1; + } + } +} + [role="button"] { cursor: pointer; } |