From 6774c339b2e22fc9cadcb466139745661d0b3c83 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 11 Nov 2022 08:26:58 +0100 Subject: [PATCH] Fix domain blocks on about page not working well on small screens in web UI (#20391) --- .../mastodon/features/about/index.js | 29 ++++------- .../styles/mastodon/components.scss | 51 ++++++++++++------- 2 files changed, 45 insertions(+), 35 deletions(-) diff --git a/app/javascript/mastodon/features/about/index.js b/app/javascript/mastodon/features/about/index.js index 8328362725..15d017642c 100644 --- a/app/javascript/mastodon/features/about/index.js +++ b/app/javascript/mastodon/features/about/index.js @@ -183,25 +183,18 @@ class About extends React.PureComponent { <>

- - - - - - - - +
+ {domainBlocks.get('items').map(block => ( +
+
+
{block.get('domain')}
+ {intl.formatMessage(severityMessages[block.get('severity')].title)} +
-
- {domainBlocks.get('items').map(block => ( - - - - - - ))} - -
{block.get('domain')}{intl.formatMessage(severityMessages[block.get('severity')].title)}{block.get('comment')}
+

{block.get('comment').length > 0 ? block.get('comment') : }

+ + ))} + ) : (

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index ecbf6afc0b..8b43604c8f 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -8557,28 +8557,45 @@ noscript { &__domain-blocks { margin-top: 30px; - width: 100%; - border-collapse: collapse; - break-inside: auto; + background: darken($ui-base-color, 4%); + border: 1px solid lighten($ui-base-color, 4%); + border-radius: 4px; - th { - text-align: left; - font-weight: 500; + &__domain { + border-bottom: 1px solid lighten($ui-base-color, 4%); + padding: 10px; + font-size: 15px; color: $darker-text-color; - } - thead tr, - tbody tr { - border-bottom: 1px solid lighten($ui-base-color, 8%); - } + &:nth-child(2n) { + background: darken($ui-base-color, 2%); + } - tbody tr:last-child { - border-bottom: 0; - } + &:last-child { + border-bottom: 0; + } - th, - td { - padding: 8px; + &__header { + display: flex; + gap: 10px; + justify-content: space-between; + font-weight: 500; + margin-bottom: 4px; + } + + h6 { + color: $secondary-text-color; + font-size: inherit; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + p { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } }