Very minor issue: on the topics list, the new messages indicator can be on a new line by itself

Contribute UX

AI-generated summary

In a UX-focused discussion, Canapin reports a minor layout issue where the new message indicator (e.g., a dot or badge) sometimes appears on a new line by itself in the topic list, illustrated with screenshots. awesomerobot claims the issue was fixed in a recent PR (#15965), but Canapin confirms it persists in 2.9.0.beta2 on Chrome, even in safe mode, and shares HTML/CSS evidence. They also note a strangely unstyled ‘nouveau’ text badge appearing in the DOM without visible styling. Additionally, Canapin observes inconsistent visual rendering of the dot badge across topic rows — despite identical CSS — attributing the variation to floating-point em-based dimensions affected by browser zoom. Later, Canapin confirms an improvement after a CSS update to enforce fixed/rounded dot dimensions, praising the visual consistency achieved.

1

Example:

image
image1132×367 29 KB

4 Likes
3

This is fixed here:

https://github.com/discourse/discourse/pull/15965

3 Likes
4

Sure about that? :thinking:

image

2.9.0.beta2

(f9e1ba4f8f)

On Chrome Desktop, and same with safe mode.

Row HTML code:

<div class="top-row">
    <!---->
    <a href="/t/nouveau-champagne-edition-1978/42061" role="heading" aria-level="2" class="title" data-topic-id="42061">Nouveau Champagne Edition 1978</a><!----><span id="ember309" class="topic-post-badges ember-view"><!---->  &nbsp;<a href="/t/nouveau-champagne-edition-1978/42061" title="nouveau sujet" class="badge badge-notification new-topic">nouveau</a>
</span>
  </div>

<a> CSS:

.topic-list-main-link a.title, .topic-list .main-link a.title, .latest-topic-list-item .main-link a.title {
    padding: 15px 0;
    word-break: break-word;
    color: var(--primary);
}

Post badge CSS:

.topic-post-badges {
    white-space: nowrap;
    align-self: center;
    line-height: var(--line-height-medium);
}

Also, a question: what’s with this “nouveau” (“new”) text? It exists in the dom, takes space, but have absolutely no style/property applied to it:

image
image2498×1440 311 KB

1 Like
5

Also, the appearance of the dot is sometimes a bit different from one topic line to another.

They have the exact same CSS properties. Both dots computed dimensions are 5.219px. But they look different:

image
image535×443 43.1 KB

On the image I posted on my previous post, it seems taller:
image

Their “roundness” varies depending on the browser zoom.
I’m fairly certain that these roundness variations are caused by their final rounded (no pun) width and heigh values since they are floating numbers (their dimensions unit are em and not px). If I set them all to 5px, the issue disappear. But I understand that their dimensions are supposed to be related to the font size or whatever else for visual consistency.

1 Like
Oval unread indicator in the categories section of the sidebar
7

If I’m not mistaken, you updated the dot CSS for a fixed (or rounded computed value) size. It looks way better, both here and on my forum I rebuilt this morning. Nice :+1: