Getting title text wrapping on mobile

[ultrabug]

Hi 🤗

site_name: My Docs With Some Really Very Much Much Long Title

theme:
  name: material

I have a site with a (very) long title which is truncated in mobile version like this:

same on the sidebar:

I would rather have the title word wrapping and not being truncated please.

Is that possible in CSS magic? 🪄

Thanks

[squidfunk]

Yes, that's possible, but likely a little more involved than changing 1-2 CSS properties, mainly because the top section of the drawer has a fixed size and the line height is used for alignment. If we can make this customization simpler, we're happy to accept a PR that does not change the current layout but allows for easier customization.

[ultrabug]

Thanks for your answer mate. I'm... let's say, not a CSS person 🙇 but if you point me to the right direction I can maybe try to spend some time understanding how it works.

As for the customization part well I clearly won't promise anything because I have no clue about how to make that kind of trick tunable afterwards. But first things first I guess 👍

[squidfunk]

I'm a little tight on time right now, but maybe somebody else with some CSS-fu can help out 🚀

[ultrabug]

It must be ugly to the CSS people but just in case it can be helpful, so far I have managed to get something working with:

@media only screen and (max-width: 501px) {
    .md-header__inner {
        padding: 1rem .2rem;
    }
    [dir=ltr] .md-header__title {
        margin-left: .4rem;
    }
    .md-header__title {
        line-height: unset;
    }
    .md-header__topic {
        white-space: unset;
    }
    .md-nav--primary .md-nav__title {
        padding: 3.5rem .8rem .2rem;
        height: unset;
        line-height: unset;
        white-space: unset;
    }
    .md-header__title--active {
        height: 2.4rem;
        line-height: 2.4rem;
        white-space: nowrap;
    }
}

[squidfunk]

Thanks for sharing! Do you have a deployed version of this?

[ultrabug]

Not yet, will share when I do