Скриншоты в статьях: было / стало

Обе колонки — реальный вывод рендера, не макет. Слева код из коммита 6cf7d1a (версия, переданная разработчикам), справа — из ветки feature/article-images. Markdown на входе одинаковый, оформление взято из globals.css соответствующей версии.

Источник: web/src/components/sections/article-content/index.tsx · конвенция — md-format.md, строка 67.

А. Скриншот внутри шага

Конвенция: ![alt](img) внутри шага → «Скриншот в рамке с подписью из alt».

1. Откройте раздел **«Водители и транспорт»** в меню слева. ![Меню ЛК, выделен пункт «Водители и транспорт»](demo-shot.png) 2. Нажмите **«Добавить водителя»**. 3. Заполните ФИО, телефон, серию и номер ВУ.

Было — без рамки и подписи

1
Откройте раздел «Водители и транспорт» в меню слева.
2
Нажмите «Добавить водителя».
3
Заполните ФИО, телефон, серию и номер ВУ.

Стало — как обещает конвенция

1
Откройте раздел «Водители и транспорт» в меню слева.
Меню ЛК, выделен пункт «Водители и транспорт»
2
Нажмите «Добавить водителя».
3
Заполните ФИО, телефон, серию и номер ВУ.

Б. Скриншот отдельным блоком

![Экран добавления водителя в личном кабинете](demo-shot.png)

Было

Экран добавления водителя в личном кабинете

Стало

В. Регресс-проверка: коллаут «Важно»

Правка касается только картинок — остальные конвенции не задеты.

До и после одинаково

Важно: Пока водитель не прошёл верификацию, назначить его на рейс нельзя.

Что в MR

renderer.image: <img> → <figure class="shot"> с <figcaption> из alt. Без alt подпись не выводится, рамка остаётся. Добавлен loading="lazy".
unwrapFigures(): marked заворачивает одиночную картинку в <p>, а <figure> внутри абзаца невалиден и рвёт вёрстку — обёртка снимается.
stepBody(): внутри шага текст остаётся в <p>, скриншоты выносятся отдельными <figure>.
globals.css: .shot / .shotCaption — рамка, радиус 12, подпись 14px. Токены из существующей палитры.
Разметку статей менять не нужно — все существующие ![alt](url) начнут отображаться правильно сами.