Slightly less wide tag chooser

AI-generated summary

Slightly less wide tag chooser discussion revolves around a UX issue on meta where the tag chooser is narrower than the title field and category chooser. codinghorror acknowledges that this issue has been present for a while and should be fixed. awesomerobot identifies two problems: select-kit 2 forcing the tag input onto a separate line and the variability in the tag input’s left margin when there’s a long category name. As a temporary fix, awesomerobot pushed a minor update so categories and tags are on the same line for mobile. A more permanent solution using grid is planned for the next release, which will allow inputs to wrap if needed without worrying about extra margin, with a fallback to the current flex implementation for older browsers.

On meta, I discovered a new UX difference: the tag chooser is slightly less wide than the title field and category chooser.

8 Likes

Probably sk2 cc @j.jaffeux

7 Likes

Actually that’s been around for a while as I recall but we should fix it.

9 Likes

I think it’s two problems

  1. select-kit 2 is forcing the tag input onto a separate line by default

  2. The longer-standing issue is that sometimes tags get pushed onto their own line when there’s a long category name, and at that point the left margin on the tag input is no longer needed. There’s no good way to account for that variability in flexbox… for mobile maybe we just force it to always be two-columns and truncate (I think it might have been that way before?).

    This isn’t a problem with grid, so at some point updating those inputs to use grid would allow it to be more flexible with fewer issues (probably best after we drop IE support)

8 Likes

Pushed a minor fix for this, so categories and tags will be on the same line for mobile

https://github.com/discourse/discourse/commit/1e20bdec577650e77fa3e848e74681e512779789

I think for the next release I’ll rework this in grid… and at that point the inputs will be able to wrap if needed without worrying about the extra left/right margin. I’ll use @supports(grid) so older browsers will fall back to the current flex implementation.

11 Likes