1Задача
На главной странице прототипа стояла полоса «как это работает» — пять карточек: вопрос, ответ ИИ, что сделать дома, позвать врача, консультация.
Выглядела она сломанной: карточки разной ширины, разной высоты, а подписи внутри рвались по одному слову в строку — «про / собаку, / кошку, / любого / питомца».
Самое обидное, что в стилях было честно написано: пять равных колонок.
2Действия
Причин оказалось две, и обе неочевидные.
Первая: у элементов сетки по умолчанию действует правило «не сжимай меня меньше содержимого». Поэтому самое длинное слово — «Консультация» — раздвигало свою колонку, а остальные ужимались. Лечится указанием, что колонка может быть уже своего содержимого.
Вторая: полоса стояла внутри левой половины экрана, рядом с чатом. На пять карточек приходилось около восьмидесяти пикселей ширины каждой — в такую ширину не помещается ни одно нормальное слово. Мы вынесли полосу отдельной строкой во всю ширину, под обе колонки.
Заодно сделали карточки одинаковой высоты и проверили, что во встроенном режиме — когда чат вставлен блоком на сайт клиента — полоса по-прежнему не показывается.
Первая попытка починить то же самое на соседней витрине сломала ей вёрстку: скрипт вырезал блок разметки регулярным выражением и заодно съел закрывающий тег колонки, из-за чего чат уехал во всю ширину. Откатили из бэкапа и переписали перенос с подсчётом вложенных тегов.
3Решение
Проверили глазами в браузере: на десктопе пять равных карточек в одну линию, подписи в две строки, высота одинаковая. На телефоне 375 пикселей — две, две и последняя во всю ширину, вбок ничего не уезжает.
Ту же правку получила вторая витрина, где была та же болезнь.
Правило на будущее: если в сетке колонки разъезжаются, дело почти всегда в том, что элементу разрешено быть шире своей колонки.