From ff4b95a2542e68f162b899b1b8996902a3cbb202 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 1 Oct 2019 04:54:29 +0200 Subject: [PATCH] [Glitch] Fix long domain block descriptions breaking table layout Port SCSS changes from c35376132b6675c21c2c85dd2456cf0779e89ad9 to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/styles/about.scss | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 7c129674d1b..a38ca99b4e4 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -145,8 +145,6 @@ $small-breakpoint: 960px; thead tr, tbody tr { - break-after: auto; - break-inside: avoid; border-bottom: 1px solid lighten($ui-base-color, 4%); font-size: 1em; line-height: 1.625; @@ -167,12 +165,25 @@ $small-breakpoint: 960px; padding: 8px; align-self: start; align-items: start; + word-break: break-all; &.nowrap { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; width: 25%; + position: relative; + + &::before { + content: ' '; + visibility: hidden; + } + + span { + position: absolute; + left: 8px; + right: 8px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } }