Misaligned pixels when scaled at multiples of 25% or 50%, but not 100%

[Arlodotexe]

Describe the bug

At certain scaling values, there's misalignment between 8 and 9 on the digit grid.

Steps To Reproduce
Steps to reproduce the behavior:

1. Set system scaling to any value other than a multiple of 100.
2. Open calculator
3. Observed misaligned pixels

Expected behavior

Grid should be properly aligned at all display scales.

Screenshots

Issue is demonstrated here: https://www.youtube.com/shorts/IHhpu_bfYZk

Testing on my own machine:
At 100% scaling:

At 125% scaling:

Device and Application Information

• OS Build: 10.0.22631.0
• Architecture: X64
• Application Version: 11.2403.6.0
• Region: en-US
• Dev Version Installed: False

Additional context
A good place to start when fixing this is to investigate and confirm whether it's caused by the Multiples of Four design/layout rule being broken, which is a common cause for this in other apps.

Requested Assignment

I'm just reporting this problem.

[Aida-Enna]

It happens to me on 100% scaling as well.

[Dedme]

I suspect its because the numbers are in their own panel and divided by 3, and .66 rounding up. you can watch it jiggle if you carefully change the window size. - i suspect it doesn't happen to the top panel as its probably a row of 4.

[TheWindermerePSR]

P0 issue please fix

[countnoobula]

Makes the app literally unusable [/s], came here to report it now. Please fix this asap. I will be in review team if needed.

Please can we add test cases for this scenario in the UITestFramework.

[mdtauk]

100% - 4epx spacing
125% - 5epx spacing
150% - 6epx spacing
175% - 7epx spacing
200% - 8epx spacing
etc.

[countnoobula]

It appears to be due to different styling usages.
The NumberPad.xaml values are not styled the same as the StandardOperator values.

This leads me to believe a part of the system was refactored/cleaned up incrementally and this is a partial remenant that can be resolved.

[Davide244]

Please triage.
Fix exists in PR draft #2376