Панбагон про тортики. Название кнопки вылезает за рамки

В прошлом году я прошла кулинарную школу Алины Макаровой. Очень хотелось тортики научиться печь. Такие, знаете, красивенькие, а не то, что у меня получалось раньше ツ

Потом написала отзыв на курс. Для этого открыла сохраненную в избранном ссылку на конкретный курс на конкретные даты — https://alinamakarova.ru/detail.php?ID=2410

И сразу бросилось в глаза, что:

1. Страница пустая (информации по курсу нет)
2. Справа на кнопке «Товар временно недоступен» надпись уезжает за пределы экрана

Подозрительно пустая страница и явный баг на кнопке

Конечно, хорошо было бы не ломать ссылку на уже проведенный курс. Делать ее непустой, а с описанием. Просто сверху большая плашка «Курс уже прошел. Ближайшие даты проведения: ХХХ». И любезная ссылочка туда, где можно записаться на курс.

Фишка же в том, что на главной странице все ссылки на очные уроки ведут не на статичную страницу курса, где меняется только блок «Когда ближайший курс и сколько стоит», а на протухающую со временем ссылку. Это не очень хорошо, но мы пока на это забьем. Хотя можно было бы предложить улучшение. Или ссылку на статичную страницу делать, или старые странички поддерживать.

Но мы сосредоточимся пока на баге «не влез в размеры кнопки»:

Простейшая локализация — свернуть окно, от «на весь экран» до небольшого размера. Ишь ты, а там не воспроизведется, все сразу влезает:

Мелкое окно

Скролируем окно туда-сюда, чтобы понять, когда оно начинает масштабироваться в мелкую версию. Примерно 1300 на 630 пикселей. Ага.

Давайте оформим баг по шаблону:

***************************************************************

Текст «Товар временно недоступен» выезжает за края кнопки

Шаги воспроизведения

Открыть ссылку на уже прошедший очный курс в окне браузера, которое шире чем 1300 на 630 пикселей. Например — https://alinamakarova.ru/detail.php?ID=2410

Результат

Текст «Товар временно недоступен» выезжает за края кнопки, см рис «Текст вылез».
Если окно небольшое, то все нормально, см рис «Мелкое окно»

Ожидаемый результат

Текст влезает в отведенные рамки. Или написан мельче, или в две строки

***************************************************************

Возможные варианты названия:

• Название кнопки недоступности товара вылезает за рамки на экране 1300 на 630 и шире
• Текст «Товар временно недоступен» выезжает за края кнопки на экране 1300 на 630 и шире
• Текст «Товар временно недоступен» выезжает за края кнопки на экране 1300х630
• ...

Но я информацию про 1300 на 630 сознательно убрала из названия. С одной стороны, она может влиять на приоритет. С другой стороны, приоритет у этой задачи и так небольшой.

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

Но если это просто обычный сайт, который будут открывать люди, то... В 21 веке диагональки чаще всего пошире ツ

Поэтому эту информацию можно опустить. Имхо. Конечно, на реальной работе надо ориентировать на коллег, какая информация им важна, какая нет. Как-то так.

См также:

Шаблон бага → использовался в статье

Шаблон улучшения — Как продумывать свое улучшение с примером, когда это приводит к отказу от постановки задачи.

Как заводить задачи в баг-трекер → подробнее о том, как ставить задачу и заполнять обязательные поля.

PS — добавила пост в общую копилку багов.