Example:
This is fixed here:
Sure about that?
2.9.0.beta2
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"><!----> <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:
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:
On the image I posted on my previous post, it seems taller:
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.
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