Незначительная визуальная ошибка при загрузке /latest

Внести вклад UX
1

Список категорий после загрузки дергается вправо, как показано здесь:

ZfvKuJPUOr2Tu
Я обычно не вижу этого при первой загрузке, но последующие перезагрузки /latest вызывают это. Мне некоторое время не удавалось заметить это на Meta (пока я буквально не написал эту тему), но это происходит постоянно на моём форуме (и, как выяснилось, теперь и на Meta для меня).

Обнаружено в Chrome/Windows 7 на рабочем столе, воспроизводится в Firefox. Эффект тем заметнее, чем шире окно. Казалось, это происходит только при входе в систему; я не наблюдаю такого поведения при анонимном просмотре. Забудьте, теперь я получаю это анонимно в Firefox и Chrome без особых усилий.

2

This is a long standing UX bug we have ideally I want us to change the way we size that the topic list uses table-layout: fixed; … @awesomerobot is that doable?

General repro is to keep scrolling down the list of topics.

The problem here is the “categories” column. It very hard to pick a “right size” for it, category names can be super long or short. I guess we could cap it at 150px and then people can do what they will on the site they host if it is too short or long.

2 лайка
3

I remember getting this bug on my forum.. I never had this issue on meta so I thought it was due to some modifications on my customize section. I corrected it by adding a fixed width to this column, I didn’t know how to fix it otherwise

.topic-list td.category {
    width: 145px;
    font-size: 1em;
}

But this wouldn’t work on every forums due to categories’ names lengh

2 лайка
4

Oh weird, I just noticed this fairly recently - maybe not very noticeable in certain circumstances (and/or I’m blind except right now).

Cool though, just reportin’ in. :slight_smile:

5

It’s problematic if sites have enormously long category names. We try to strongly discourage this, and put forced ellipsis on catergory badge length. So in theory we could set category column to a fixed width of maximum “allowed” category badge width..