выбрано Описание темы — во всплывающей карточке

Строка товара не растёт: у поля темы стоит иконка-подсказка, по клику сбоку открывается карточка с полным текстом и своим скроллом. Второй разобранный вариант — раскрытие текста прямо в строке — отклонён: он двигает соседние товары вниз, и длина описания начинает влиять на вёрстку карточки ритмолога.

Покой — иконка рядом с полем темы
Консультация тематическая
1ч.
6 600 ₽
Купить
Тема
Отношения
Карточка открыта
Консультация тематическая
1ч.
6 600 ₽
Купить
Тема
Отношения

Ритмомера отношений

Разбираем, из чего сложены ваши отношения с близкими и что в них можно перестроить. На консультации смотрим на ритм вашей пары или семьи: в какие периоды накапливается напряжение, какие ожидания вы предъявляете друг другу и откуда они взялись. Отдельно разбираем повторяющиеся сценарии — ссоры по одному и тому же поводу, молчание, отдаление — и то, какие действия способны их прервать.
Тема не выбрана — иконки нет
Консультация тематическая
—
—
Купить
Тема
Выберите тему
Как это устроено
Иконка — та же «информация», что уже стоит у названия товара и у «Офлайн» в фильтрах каталога: обводка 1,5px #BCBCC9, 24px. Ничего нового не рисуем. Стоит сразу за полем темы с отступом 10; открытая карточка красит её в зелёный. Пока тема не выбрана, иконки нет: описывать нечего.
Строка темы идёт под названием товара и занимает весь блок — часы, цена и «Купить» стоят на линии названия и места под ней не занимают. Поле — 420px, ровно как раскрытый список тем.
Карточка — 380px, радиус 14, тень 0 16 40 rgba(34,33,38,.16), хвостик смотрит на иконку. Заголовок — полное название темы из справочника, а не краткое, которое стоит в поле.
Высота карточки фиксирована, текст скроллится внутри. Поэтому длина описания не влияет ни на строку товара, ни на соседние: сколько бы менеджер ни написал, вёрстка карточки ритмолога не меняется.
Закрывается кликом мимо, по иконке ещё раз и по Esc. Одновременно открыта одна карточка.
На телефоне карточки нет. Та же иконка открывает шторку снизу — экран «Описание темы» на странице «Приложение». Всплывашка рядом с полем на 390px не помещается и перекрывает то, ради чего её открыли.