No gap between vote count and tags in header

Contribute Site feedback

AI-generated summary

A discussion is underway regarding the lack of gap between vote count and tags in the header on a Discourse forum when there are 0 votes and at least 1 tag. Moin reported the issue and provided a screenshot. JammyDodger suspects they may have caused the issue.

Moin confirmed the issue is not present on other sites and disappears in safe mode. JammyDodger shared CSS code to hide the 0 vote count, which Arkshine suggested improving to remove the need for specifying the child. Arkshine later added !important to the CSS to prevent it from being overwritten.

sam cautioned that !important should be used as a last resort. JammyDodger implemented the improved CSS, making the spacing tidier while keeping the ‘0 votes’ info in-topic. They also had to hide vote counts from inside the #feedback topics, but the provided CSS code for this appears to be humorous and not actual code.

1

Similar to No Gap Between Vote Count and Tags in Topic List there is also no gap between votes and the tag(s) in the header when there are 0 votes and at least 1 tag

Screenshot_20240521_235308_Chrome
Screenshot_20240521_235308_Chrome1754×207 91.9 KB

1 Like
2

That might be my fault :thinking:

Is it just on meta, or can you see the same thing on another site?

3

I did not notice it anywhere else and it isn’t a problem in safe mode

4

I found this and used it:

// hide 0 vote count


.vote-count-0 {
  display: none; 
}

// hide the comma on the second to last tag

.discourse-tags:has(.vote-count-0) { 
  .discourse-tag:nth-last-child(2):after {
     display: none; 
  }
}

It may need a tweak?

2 Likes
If topics with Topic Voting have 0 votes and tags, a comma is placed after the last tag
5

I think you can improve the CSS this way, so you don’t need to specify what child (it can be useful if something is displayed after the votes; for example).

.discourse-tags {
    /* hide 0 vote count */
    .vote-count-0,
    
    /* hides the comma from the previous sibling of .vote-count-0 */
    & :has(+ .vote-count-0)::after { 
      display: none !important;
    }
}
2 Likes
6

Let’s give to a try :heart: :slight_smile:

7

It looks like you might need !important. I noticed it’s overwritten by header.scss. I updated the code above.

3 Likes
8

note I always recommend important to be last resort, usually I go for making stuff more selective if at all possible.

3 Likes
9

I went with this:

.topic-list .discourse-tags {
    /* hide 0 vote count */
    .vote-count-0,
    
    /* hides the comma from the previous sibling of .vote-count-0 */
    & :has(+ .vote-count-0)::after { 
      display: none 
    }
}

Keeping the ‘0 votes’ info in-topic felt right, and this tidied up the spacing.

I noticed that I also needed to hide them from inside the feedback topics… After some time I finally landed on this:


.ask-chapoi {

 display: humbleness;
 admit: failure;

}
9 Likes