diff options
| author | Eugen Rochko <eugen@zeonfederated.com> | 2022-11-11 08:26:58 +0100 |
|---|---|---|
| committer | Claire <claire.github-309c@sitedethib.com> | 2022-11-12 13:56:49 +0100 |
| commit | 400d1683102c6645c948a823b6108300c178f7d7 (patch) | |
| tree | 0524b1e31265dda8fa090c0add0e0bf5278f7109 /app/javascript/flavours/glitch/styles/components | |
| parent | d525ae4bdd0325815b2b4937754bb4938f6d08c3 (diff) | |
[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 <claire.github-309c@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
| -rw-r--r-- | app/javascript/flavours/glitch/styles/components/about.scss | 51 |
1 files changed, 34 insertions, 17 deletions
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; + } } } } |