bare/docs/decisions/065-message-side-alignment.md

ADR-065: сообщения выравниваются по стороне — свои вправо, чужие влево

Уточнён ADR-077: стороны остаются на телефоне и планшете, на десктопе все сообщения выравниваются слева.

Пересматривает часть ADR-024: десктопную сетку ленты «автор 132 px + текст» из docs/identity/brief.md, «Компоновка». Уточняет docs/ui.md, «Чат».

Контекст

Тест с реальными пользователями: единый список с колонкой автора — десктоп сеткой 132px 1fr, мобильный автором над группой — читается медленно. Чтобы понять, кто автор строки, нужно каждый раз смотреть в колонку слева; с чужого сообщения на своё и обратно глаз идёт через всю ширину.

Разделение по стороне, как в обычных мессенджерах, снимает это одним взглядом: своё — у своего края, чужое — у чужого. Айдентика «Скобы» этому не мешает и не помогает — про стороны сообщений там ничего нет, — но прямо запрещает пузыри, скругления и тени (identity/brief.md, «Цвет»). Значит выравнивание, а не bubble-чат: то же плоское сообщение, что и сейчас, просто у другого края.

Десктопная сетка 132px 1fr для этого не годится: колонка автора у неё одна на весь список, слева, общая для всех строк. Разделить строки по сторонам в фиксированной сетке нечем — под это нужен один и тот же поток и на десктопе, и на мобильном, каким мобильный уже пользуется («автор над группой»). Решение — не расширять сетку, а убрать её: десктоп переходит на тот же поток, что мобильный.

Решение

• Лента — везде (десктоп и мобильный) один поток блоков сверху вниз: автор и время строкой, текст под ними, без сетки.
• Блок своего сообщения выравнивается по правому краю ленты, чужого — по левому. Свой ник в колонке автора остаётся цветом mark (ADR-024) — сторона и цвет вместе, не одно вместо другого.
• Ширина блока ограничена (min(640px, 85%)), иначе выравнивать нечего: абзац во всю ширину ленты выглядит одинаково с любого края. Текст внутри блока остаётся выровнен по левому краю независимо от стороны — многострочное сообщение с рваным правым краем читается быстрее, чем с рваным левым.
• Разделители дат и «новые» — во всю ширину ленты, не по ширине сообщения: они не принадлежат стороне.
• Никаких фонов, рамок, скруглений и теней вокруг сообщения — это не бабл, а положение блока.
• CSS-класс feed-list вместо grid: сетки в разметке больше нет, имя не должно об этом врать.

Следствия

• docs/identity/brief.md, «Компоновка»: строка про сетку 132px 1fr заменена на «поток, свои сообщения — у правого края, чужие — у левого, ширина блока ограничена».
• docs/ui.md, «Чат»: абзац про ленту переписан под общий для обеих ширин экрана поток.
• docs/identity/screens.html (эталон 2a/2b) обновлён: десктопный мок 2a больше не показывает сетку, оба мока показывают сообщения по сторонам.
• Десктопная и мобильная лента визуально сближаются: раньше это были заметно разные раскладки, теперь — одна, с разной шириной блока и отступов. Разница экранов остаётся в сайдбаре, шапке и размере поля ввода (ADR-021, identity/brief.md).
• Комната с тремя и более участниками: у чужих сообщений сторона всех, кроме себя, одна и та же (левая) — различает их по-прежнему только ник и цвет, сторона тут ничего не добавляет и не мешает.