Проблема
Карточки сессий в сетке имеют разную высоту в зависимости от длины текста. Карточки с длинным описанием выше соседних в той же строке — особенно заметно, когда рядом стоят LIVE/WAITING-карточки и обычные.
Причины:
.card-live-wrap (обёртка для LIVE/WAITING сессий) не имеет flex-раскладки, поэтому вложенная .card не растягивается до высоты строки сетки.
- Текст
.card-body не ограничен по числу строк, из-за чего длинные описания делают карточки выше коротких.
Исправление
display: flex; flex-direction: column на .card-live-wrap — передаёт растянутую высоту вниз.
flex: 1 на .card-live-wrap > .card — карточка заполняет всю высоту обёртки.
-webkit-line-clamp: 3 на .card-body — обрезает текст на 3 строках.
Как проверить
- Открыть вид Timeline или All Sessions (сетка).
- Все карточки в одной строке должны быть одинаковой высоты.
- LIVE/WAITING-карточки (с анимированной рамкой) должны совпадать по высоте с соседними.
- Длинные описания обрезаются на 3 строках с многоточием.
Проблема
Карточки сессий в сетке имеют разную высоту в зависимости от длины текста. Карточки с длинным описанием выше соседних в той же строке — особенно заметно, когда рядом стоят LIVE/WAITING-карточки и обычные.
Причины:
.card-live-wrap(обёртка для LIVE/WAITING сессий) не имеет flex-раскладки, поэтому вложенная.cardне растягивается до высоты строки сетки..card-bodyне ограничен по числу строк, из-за чего длинные описания делают карточки выше коротких.Исправление
display: flex; flex-direction: columnна.card-live-wrap— передаёт растянутую высоту вниз.flex: 1на.card-live-wrap > .card— карточка заполняет всю высоту обёртки.-webkit-line-clamp: 3на.card-body— обрезает текст на 3 строках.Как проверить