From 400d1683102c6645c948a823b6108300c178f7d7 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 11 Nov 2022 08:26:58 +0100 Subject: [Glitch] Fix domain blocks on about page not working well on small screens in web UI Port 6774c339b2e22fc9cadcb466139745661d0b3c83 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/about/index.js | 31 +++++-------- .../flavours/glitch/styles/components/about.scss | 51 ++++++++++++++-------- 2 files changed, 46 insertions(+), 36 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/about/index.js b/app/javascript/flavours/glitch/features/about/index.js index 4129c8236..f97eb64b4 100644 --- a/app/javascript/flavours/glitch/features/about/index.js +++ b/app/javascript/flavours/glitch/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)}{block.get('comment')}
+
+ {domainBlocks.get('items').map(block => ( +
+
+
{block.get('domain')}
+ {intl.formatMessage(severityMessages[block.get('severity')].title)} +
+ +

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

+
+ ))} +
) : (

diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.scss index c6cc6c615..6664a5756 100644 --- a/app/javascript/flavours/glitch/styles/components/about.scss +++ b/app/javascript/flavours/glitch/styles/components/about.scss @@ -247,28 +247,45 @@ &__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; + } + + &__header { + display: flex; + gap: 10px; + justify-content: space-between; + font-weight: 500; + margin-bottom: 4px; + } - th, - td { - padding: 8px; + 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; + } } } } -- cgit