Category drop down not truncating ... for longer category names

[Lilly (Lillian)]

category drop down selector display property isn’t wrapping / truncating (…) on longer category names.

[Arkshine]

Without making width changes to keep the same visual, adding an ellipsis might be a solution here:

.name > .badge-wrapper .badge-category {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

[Lilly (Lillian)]

thanks, i was thinking of CSS’ing it but hadn’t even attempted yet. you saved me some time trying to figure it out! nice work

[isaac (Isaac Janzen)]

@Lilly does this happen in safe mode? Looking at a longer category here on meta seems to display as expected!

[Lilly (Lillian)]

i can confirm it is happening safe mode

@isaac - i added screenshot

[Arkshine]

I did not check, but there is already CSS code, my bad.

However, it seems to select the category name with a bullet, and there is no bullet on Lilly’s Discourse.

On meta:

Lilly:

[Lilly (Lillian)]

i remove my bullets in the badge wrappers. but your code worked fine.

i know there is a setting for category bullets but i like to have granular control over where bullets appear in different themes.

[isaac (Isaac Janzen)]

@Lilly

i remove my bullets in the badge wrappers.

I think this is the cause of your issue, or at least having adverse effects. On the latest version of Discourse:

@Lilly

but your code worked fine.

Did the dropdown options truncate before?

[Lilly (Lillian)]

@isaac i’ve removed my badge wrapper hide code and also the ellipses code that @Arkshine provided and i am now running it in safe mode with admin-settings- category style set to none (no badges) and i still get the same issue as the safe-mode screenshot above. components shouldn’t make a difference in safe-mode anyways.

[isaac (Isaac Janzen)]

Thanks @Lilly, yup, I can replicate the issue now! Thank you!

[Lilly (Lillian)]

FWIW i posted this in UX instead of bug because it’s clearly not a functional or critical issue, and only affects UI appearance for the case of extra long category names (and as we’ve since discovered, no badge wrapper bullets).

[awesomerobot (Kris)]

This has been fixed here:

https://github.com/discourse/discourse/commit/9268bb92bdcc7d6ec62e5506112542d89e836069

[Lilly (Lillian)]

@awesomerobot is awesome thanks!