From 14ca559705285432f06d9343dc2d00c0b009184b Mon Sep 17 00:00:00 2001 From: Sasha Sorokin Date: Fri, 24 Jan 2020 14:50:49 -0500 Subject: [PATCH] Evenly spread space between tabs (#12944) This commit fixes uneven spread of space between the tabs in profiles or notifications (filters). The problem was that links and buttons shown as blocks had their width determined according to the content inside of them, so if one tab has more text content than another, it is going to take over others space, which is uneven and results in incorrectly aligned (?) tabs display. By specifying the size of 100% for each tab, parent container will be forced to divide available space by the number of elements and evenly give each child fixed space, "text-align: center" then doing its best job to keep tabs text centered in that space. This relatively fixes the problem, but will introduce another one - when the block has more content that its width allows to have, in this scenario the text should be wrapped or will be displayed over the other elements, but I see this more as translators' problem. Still, for this case "overflow: hidden" is added and any unfitting text will be cut out. --- app/javascript/styles/mastodon/components.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 922d48ad7..8147ef28d 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5731,6 +5731,8 @@ a.status-card.compact:hover { text-align: center; text-decoration: none; position: relative; + overflow: hidden; + width: 100%; &.active { color: $secondary-text-color;