Fix SubdomainNavBar review findings

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: ed05986d-edce-42e8-8d89-da23c403edda

Author: danielguillan

packages/e2e/scripts/playwright/playwright.generate-tests.ts

@@ -154,7 +154,7 @@ const beforeScreenshotLookup: Partial<Record<string, string>> = {
     if ((await moreButton.getAttribute('aria-expanded')) !== 'true') {
       await moreButton.click()
     }
-    const overflowMenu = page.locator('[id="' + (await moreButton.getAttribute('aria-controls')) + '"]')
+    const overflowMenu = page.locator(\`[id="\${await moreButton.getAttribute('aria-controls')}"]\`)
     await expect(moreButton).toHaveAttribute('aria-expanded', 'true')
     await expect(overflowMenu).toBeVisible()
     await expect(overflowMenu.getByRole('link', {name: 'Books'})).toBeVisible()

packages/react/src/SubdomainNavBar/SubdomainNavBar.module.css

@@ -288,7 +288,7 @@
     align-items: center;
     flex: 0 0 auto;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     visibility: hidden;
     pointer-events: none;
   }

packages/react/src/SubdomainNavBar/SubdomainNavBar.test.tsx

@@ -152,6 +152,12 @@ describe('SubdomainNavBar', () => {
     expect(getByRole('banner')).toHaveAttribute('id', 'docs-navigation')
   })
 
+  it('forwards custom styles to the root element', () => {
+    const {getByRole} = render(<SubdomainNavBar style={{opacity: 0.5}} title="Docs" />)
+
+    expect(getByRole('banner')).toHaveStyle({opacity: '0.5'})
+  })
+
   it('has no a11y violations by default', async () => {
     const {container} = render(<Component />)
 

packages/react/src/SubdomainNavBar/SubdomainNavBar.visual.spec.ts

@@ -84,7 +84,7 @@ test.describe('Visual Comparison: SubdomainNavBar', () => {
     if ((await moreButton.getAttribute('aria-expanded')) !== 'true') {
       await moreButton.click()
     }
-    const overflowMenu = page.locator('[id="' + (await moreButton.getAttribute('aria-controls')) + '"]')
+    const overflowMenu = page.locator(`[id="${await moreButton.getAttribute('aria-controls')}"]`)
     await expect(moreButton).toHaveAttribute('aria-expanded', 'true')
     await expect(overflowMenu).toBeVisible()
     await expect(overflowMenu.getByRole('link', {name: 'Books'})).toBeVisible()