Missed CSS in reply to buttons

PeopleInside commented 3 years ago

Bug Report

Current Behavior

https://discuss.flarum.org/d/27511-flarum-10-design-login-to-reply-issue

In the case the reply to button on a discussion is too long, for example for translated text, you should apply the following CSS:

        overflow: hidden;
        text-overflow: ellipsis;

This is used for left button "start topic" for example when user cannot start a topic but is not set for reply buttons so in my Italian community version Stable 1.0 the buttons for reply are showed badly.

Shared-Screenshot

Steps to Reproduce You need use the nerata italian language and Flarum 1.0 than open as guest (not logged) a discussion and you will see the wrong reply button format.

Expected Behavior

Button should looks good not bad as the screenshot above. The result should be:

Shared-Screenshot

Environment

Flarum version: 1.0

Output of "php flarum info", run this in terminal in your Flarum directory.

Possible Solution

You need add

overflow: hidden;
text-overflow: ellipsis;

to

.DiscussionPage-nav .ButtonGroup, .DiscussionPage-nav .Button {
    width: 100%;
}

PeopleInside commented 3 years ago

@luceos

Issue that I reported here about be unable to edit tag in Flarum 1.0.2 is caused by my previous suggested CSS for fix this bug on GitHub. Now I changed the CSS code... maybe I just need you fix this issue with the correct CSS.

.ButtonGroup > .Button:first-child:not(:last-child):not(.Dropdown-toggle) {
    overflow: hidden;
    text-overflow: ellipsis;
}

davwheat commented 3 years ago

I have mixed feelings on hiding overflowing text entirely...

Would wrapping onto a new line not be better? It does end up looking a bit messy.

PeopleInside commented 3 years ago

Interesting. Don't know, I used the two CSS propriety because this is used on left button when user cannot posting.

SychO9 commented 3 years ago

I have mixed feelings on hiding overflowing text entirely...

Would wrapping onto a new line not be better? It does end up looking a bit messy.

I like that, though I think if we do it we should probably use a custom modifier class like Button--multiline, because removing white-space: nowrap on all buttons could end up in unwanted changes elsewhere.

flarum / issue-archive

Missed CSS in reply to buttons #89

Bug Report