Filter by solved dropdown display issues

ux
#1

It looks like the solutions.scss is missing a display item.

.select-kit appears to be display: inline-block; and that leaves .select-kit.solved-status-filter as the same. That makes the filter box display differently than the rest of the filter boxes.

I’ve temporarily overridden with display: flex; for that element. I’d PR a fix but there’s not much information on how you all would like submissions to be made.

And side note, the other filters use the right arrow for resting state, this uses down arrow as the resting state.

Screenshot_2021-02-12 Latest topics - Pi-hole Userspace

2 Likes
Discourse Solved (Accepted answer plugin)
#2

Thanks for reporting that! I can reproduce the issue on my local development version of Discourse that’s running the latest Discourse code, so it looks like the problem hasn’t been fixed yet.

I’ve moved your post to a new topic in the UX category to help us track the issue.

4 Likes
#4

I’ve got a fix ready here:

If you update next week it should be available. It’s merged an available now.

In the meantime you can add this css to your site’s theme if you’d like to fix it right away:

.select-kit {
  &.solved-status-filter {
    margin-bottom: var(--nav-space); // core variable
    .select-kit-header {
      margin: 0;
    }
  }
}
4 Likes
#5

I’ve noticed in a few places that selectors using variables in property values are changing from $var format to --var format. Is this a framework change and is it documented anywhere?

1 Like
#6

It is, for colors we made the change to CSS custom properties instead of SCSS variables support dark mode… there are more details here: Updating themes and plugins to support automatic dark mode

We’ve also been using custom properties instead of adding new sass variables elsewhere where possible, there are some pros and cons of each method.

4 Likes