Доработка дизайна страницы курса в Figma
Требуется внести правки в макет страницы «Уроки»: перерасположить медиаблоки, добавить новые элементы, сохранив общий стиль и структуру. Для ознакомления приложен PDF с текущим состоянием.
Задача: Исправление поведения текстового блока в кнопке
В текущей верстке кнопки текстовый блок растягивается на всю доступную ширину контейнера, что приводит к визуальному дефекту - текст выглядит слишком широким.
Требуемый результат
Необходимо настроить отображение так, чтобы текстовый блок внутри кнопки занимал ширину, равную ширине самой широкой строки текста в этом блоке.
Что нужно сделать
- Проанализировать текущую структуру HTML и CSS.
- Предложить чистое CSS-решение для изменения поведения ширины текстового блока.
- Обеспечить кроссбраузерную совместимость (современные браузеры).
- Решение не должно ломать остальную верстку элемента.
Приоритетные методы
- Использование свойств
display: inline-block,width: fit-content,min-widthили аналогичных. - Решение должно быть максимально лаконичным и эффективным.
Доступна визуальная демонстрация проблемы для наглядности.