トピックリストで、新着メッセージのインジケーターが単独で新しい行に表示されることがある

UX
1

例：

image
image1132×367 29 KB

「いいね！」 4
3

これはここで修正されました。

「いいね！」 3
4

本当にそう思いますか？ :thinking:

image

2.9.0.beta2

(f9e1ba4f8f)

Chromeデスクトップ版、セーフモードでも同様です。

行のHTMLコード：

<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);
}

投稿バッジCSS：

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

また、質問ですが、この「nouveau」（「新しい」）というテキストは何ですか？DOMには存在し、スペースを占めていますが、スタイル/プロパティは一切適用されていません。

image
image2498×1440 311 KB

「いいね！」 1
5

また、トピック行によって点の表示が異なる場合があります。

CSSプロパティは全く同じです。両方の点の計算された寸法は5.219pxです。しかし、見た目は異なります。

image
image535×443 43.1 KB

前の投稿に投稿した画像では、より背が高く見えます。
image

ブラウザのズームによって、「丸み」は変化します。
これらの丸みの変化は、最終的な丸められた（言葉遊びではない）幅と高さの値が浮動小数点数であること（寸法単位はpxではなくem）が原因であると確信しています。それらをすべて5pxに設定すると、問題は解消されます。しかし、視覚的な一貫性のために、それらの寸法はフォントサイズなどに依存するはずであることは理解しています。

「いいね！」 1
7

私の記憶が正しければ、固定（または丸められた計算値）サイズのためにドットCSSを更新しましたね。私のフォーラムでも、今朝再構築したフォーラムでも、ずっと良くなりました。素晴らしいです :+1: