Site title breaks mobile menu when too long

[LordZardeck]

This could be fixed by making the title clipped with ellipsis. I will make a PR later tonight.

[ralic]

Here is an example for the solution : http://ec2-52-8-95-16.us-west-1.compute.amazonaws.com:4567/

1)Modifiy header.tpl in ~/node_modules/nodebb-theme-material/templates/menu.tpl

Line 24:
From: <a class="title" href ....
To : <a class="forum-title" ....

2)Modify css class in ~/node_modules/nodebb-theme-material/less/header.less
Add new class info after line 48 with @media for smaller screen.

.forum-title {
font-size:25px;
}

.forum-logo {
float: left;
max-height: 40px;
width: auto;
}

@media only screen and (max-width: 600px) {
.forum-title {
line-height :35px;
font-size:14px;
}
.forum-logo {
margin-top : 0px;
max-height: 30px;
}
}

[LordZardeck]

@ralic The first problem with that solution is that you have the icons on the header removed on lower resolutions. My solution leaves those intact.

Secondly, while reducing the font size is probably a good addition, it still won't solve the issue when the icons are present.

By having it as a flex-box, it will adjust the width to be the remaining space after icons, and will use elipsis to show the user there wasn't enough room to show the entire title. See my PR: #21

[ralic]

Actuarially, I reduced the forum-logo and forum-title size responsively to smaller screen.

[LordZardeck]

@ralic I recognize that, but I do not agree that it's a complete solution. It doesn't fix every issue. I can break it by simply having a longer title. See below:

[ralic]

I got your point. Collapsing the title or keep the title short might be the best idea :)

[Master-Antonio]

Same problem on me.