[Toolkit][Shadcn] Round the position of the navigation-menu panel to a whole pixel

src/Toolkit/kits/shadcn/navigation-menu/assets/controllers/navigation_menu_controller.js

@@ -158,15 +158,16 @@ export default class extends Controller {
     }
 
     // Anchor to the trigger's inline-start, but shift so the content never overflows the viewport.
+    // The edge is rounded to a whole pixel: text placed on a fractional pixel is not rendered the same way every time.
     #viewportInlineStart(navRect, itemRect, width, rtl) {
         const margin = 8;
         if (rtl) {
-            const right = Math.max(width + margin, Math.min(itemRect.right, window.innerWidth - margin));
+            const right = Math.round(Math.max(width + margin, Math.min(itemRect.right, window.innerWidth - margin)));
 
             return navRect.right - right;
         }
 
-        const left = Math.max(margin, Math.min(itemRect.left, window.innerWidth - margin - width));
+        const left = Math.round(Math.max(margin, Math.min(itemRect.left, window.innerWidth - margin - width)));
 
         return left - navRect.left;
     }

src/Toolkit/kits/shadcn/navigation-menu/tests/navigation-menu.spec.ts

@@ -88,6 +88,27 @@ describeRecipe('shadcn/navigation-menu', () => {
         await expect(page.getByRole('link', { name: /Introduction/ })).toBeVisible();
     });
 
+    for (const { example, trigger, edge } of [
+        { example: 'default', trigger: 'Getting started', edge: 'left' },
+        { example: 'rtl', trigger: 'ابدأ', edge: 'right' },
+    ] as const) {
+        test(`aligns the ${edge} edge of the panel on a whole pixel in the ${example} example`, async ({
+            page,
+            gotoExample,
+        }) => {
+            await gotoExample(`shadcn/navigation-menu/${example}`);
+            const viewport = page.locator('[data-slot="navigation-menu-viewport"][data-state="open"]');
+
+            await page.getByRole('button', { name: trigger }).click();
+            await expect(viewport).toBeVisible();
+            await page.evaluate(() => Promise.all(document.getAnimations().map((animation) => animation.finished)));
+
+            const box = (await viewport.boundingBox())!;
+            const position = 'left' === edge ? box.x : box.x + box.width;
+            expect(position).toBe(Math.round(position));
+        });
+    }
+
     test('switches to another item at once while one is open', async ({ page, gotoExample }) => {
         await gotoExample('shadcn/navigation-menu/default', { timers: 'fake' });
         const gettingStarted = page.getByRole('button', { name: 'Getting started' });