Fix ratio-bar sizing for inline YouTube controls (#1292)

Use rendered widths when inline reaction wrappers report non-numeric computed widths or zero client widths. Preserve existing block-control measurements in the extension and userscript, with generated-artifact browser regression coverage.

Extensions/UserScript/e2e/userscript-control-width.e2e.js

@@ -0,0 +1,60 @@
+const { test, expect } = require("@playwright/test");
+const {
+  CREDENTIAL_KEY,
+  VIDEO_A,
+  createFakeBackend,
+  injectGeneratedUserscript,
+  installGmEnvironment,
+  installHermeticRoutes,
+  openWatchFixture,
+} = require("./harness");
+const {
+  WATCH_CONTROL_LAYOUTS,
+  expectWatchControlWidths,
+  installWatchControlLayout,
+  widenWatchControls,
+} = require("../../e2e/watch-control-width-contract");
+const { createPageSignalCollector } = require("../../e2e/hermetic-artifact-smoke");
+
+const COUNTS = { likes: 300, dislikes: 100 };
+const PROFILE = {
+  container: "#return-youtube-dislike-bar-container",
+  bar: "#return-youtube-dislike-bar",
+  controlWidth: "clientWidth",
+};
+
+for (const layout of WATCH_CONTROL_LAYOUTS) {
+  test(`generated userscript measures ${layout.name} controls before and after a vote`, async ({ context, page }) => {
+    const pageSignals = await createPageSignalCollector(page, "userscript");
+    const backend = createFakeBackend({ countsByVideo: { [VIDEO_A]: COUNTS } });
+    await installGmEnvironment(context, {
+      [CREDENTIAL_KEY]: {
+        userId: "ExistingUserscriptCredential000000000001",
+        registrationConfirmed: true,
+      },
+    });
+    await installHermeticRoutes(context, backend);
+    await installWatchControlLayout(context, layout);
+    await openWatchFixture(page, VIDEO_A);
+    await injectGeneratedUserscript(page);
+
+    const dislikeText = page.locator('[data-ryd-role="dislike"] #text');
+    await expect(dislikeText).toHaveText(String(COUNTS.dislikes));
+    const before = await expectWatchControlWidths(page, PROFILE, { ...layout, ...COUNTS });
+    await widenWatchControls(page);
+    await page.locator('[data-ryd-role="dislike"] button').click();
+    await expect(dislikeText).toHaveText(String(COUNTS.dislikes + 1));
+    const after = await expectWatchControlWidths(page, PROFILE, {
+      ...layout,
+      likes: COUNTS.likes,
+      dislikes: COUNTS.dislikes + 1,
+    });
+    expect(after.wrapperWidth).toBeGreaterThan(before.wrapperWidth);
+    await expect.poll(() => backend.requestsFor("POST", "/interact/confirmVote").length).toBe(1);
+    expect(backend.requestsFor("POST", "/interact/vote")).toHaveLength(1);
+    expect(backend.requestsFor("POST", "/interact/vote")[0].body).toMatchObject({ videoId: VIDEO_A, value: -1 });
+    await expect.poll(() => backend.requestsFor("POST", "/interact/confirmVote")[0]?.responseBody).toBe(true);
+    expect(backend.blockedRequests).toEqual([]);
+    await pageSignals.assertClean("watch-control-width");
+  });
+}