about summary refs log tree commit diff
diff options
context:
space:
mode:
authorSasha Sorokin <dafri.nochiterov8@gmail.com>2020-01-24 14:50:49 -0500
committerEugen Rochko <eugen@zeonfederated.com>2020-01-24 20:50:49 +0100
commit14ca559705285432f06d9343dc2d00c0b009184b (patch)
tree939666881234256681f1f145adcb50168849694d
parent4bae4e972d43f71bffb888ac82c180b2fa3f1ada (diff)
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.
-rw-r--r--app/javascript/styles/mastodon/components.scss2
1 files changed, 2 insertions, 0 deletions
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;