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

Contribute UX

AI-generated summary

The issue of category drop-down not truncating for longer category names was reported by Lilly. Arkshine provided a CSS solution using text-overflow: ellipsis, which worked for Lilly.

However, isaac questioned whether the issue occurred in safe mode and if it was related to the absence of bullets in the badge wrappers. Lilly confirmed the issue persisted in safe mode, and isaac suspected that the removal of bullets in the badge wrappers might be the cause.

After further testing, Lilly ruled out the possibility that components were causing the issue and isaac was able to replicate the problem.

Lilly clarified that the issue was posted in the UX category as it only affects the UI appearance. The issue has since been fixed by awesomerobot in a Discourse commit.

1

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

IMG_3375
IMG_33751467×305 65.1 KB

3 Likes
2

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;
}

image

2 Likes
3

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

2 Likes
4

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

2 Likes
5

i can confirm it is happening safe mode

IMG_3378
IMG_33781109×217 67.9 KB

@isaac - i added screenshot

1 Like
6

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:

image
image1231×167 16 KB

Lilly:

image
image1144×187 15.9 KB

7

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.

8

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

Screenshot 2023-05-25 at 10.00.04 AM
Screenshot 2023-05-25 at 10.00.04 AM766×262 18.1 KB

Screenshot 2023-05-25 at 10.00.09 AM
Screenshot 2023-05-25 at 10.00.09 AM784×632 41.9 KB

Screenshot 2023-05-25 at 9.57.46 AM
Screenshot 2023-05-25 at 9.57.46 AM1194×178 15.8 KB

Did the dropdown options truncate before?

9

@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.

1 Like
10

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

2 Likes
11

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).

12

This has been fixed here:

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

2 Likes
13

@awesomerobot is awesome :star_struck: thanks!

2 Likes
14

This topic was automatically closed after 15 hours. New replies are no longer allowed.