# 40. Устойчивая раскладка ингредиентов выбранной цели

Дата: 9 ноября 2026. Исправление интерфейса: 0.5.3. Правила: prototype-solo30-v6.

## Дефект со скриншота

После добавления серебра в цели его ингредиенты получали флажок через ::before. При автоматическом размещении элементов сетки флажок занимал первую ячейку. Изображение переходило в широкую колонку названия, название — в узкую колонку статуса, а звезда — на следующую строку. Поэтому слова переносились по нескольким буквам и карточки становились очень высокими.

Скриншот содержит предыдущую версию карточки с кнопками «Характеристики» и «i». В 0.5.2 флажок уже вынесен из потока. Эта версия дополнительно устраняет зависимость от автоматического размещения и защищает получение новых стилей после обновления сайта. Наличие старой раскладки на скриншоте само по себе не доказывает конкретную причину сохранения старой страницы в браузере.

## Исправление

- В общих стилях выбранного ингредиента флажок сразу получает абсолютное позиционирование относительно строки. Он не участвует в сетке и не перекрывает нажатия.
- Для четырёх частей строки явно назначены области: изображение, название, статус наличия и избранное. Добавление метки не сдвигает эти элементы.
- При сборке сайта ссылки на CSS получают версию, вычисленную из содержимого соответствующего файла. Изменившийся CSS получает новый URL; неизменившийся файл сохраняет прежний. Это предотвращает повторное использование старого стиля по прежнему адресу после загрузки обновлённой HTML-страницы.
- Компактные карточки, один выбор качества и аккордеоны версии 0.5.2 сохранены. Сохранения, рецепты и выбранные пользователем цели не сбрасываются.

## Проверка

Браузерный сценарий запускает именно собранную страницу dist. Он воспроизводит случай серебра с двумя ингредиентами в новой пятёрке и одним недостающим, несколько раз выключает и включает цель, добавляет ещё две цели, включая альтернативную формулу из пяти качеств.

На 320×568, 384×720, 390×844, 844×390 и 1440×1000 проверяются ширина названия, порядок четырёх колонок, звезда в одной строке с изображением, флажок вне потока и отсутствие переполнений. Дополнительно проверяются избранное, восстановление трёх целей после перезагрузки и неизменность партии от просмотра книги.

Тест сверяет версии всех CSS с SHA256 реальных файлов и подменяет запрос старого адреса стилей дефектным CSS. Собранная страница не запрашивает такие адреса. Это проверка версий ссылок в браузере, а не измерение поведения кэша на физическом телефоне.

Основные отчёты: output/GemTD_goal_layout_QA.json и output/GemTD_goal_layout_mobile.png. 130 тестов логики проходят. Публикация подтверждается отдельно ответом Sites и output/GemTD_goal_layout_delivery.json.