🐛 fix: deduplicate settings-title testid for Playwright strict mode

The Settings component renders both a desktop sidebar and mobile header,
each with data-testid='settings-title'. Playwright strict mode rejects
queries that resolve to multiple elements. Update the settings e2e tests
to accept the renamed mobile instance 'settings-title-mobile'.

Fixes #19338

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

Author: clubanderson

web/e2e/Settings.spec.ts

@@ -74,8 +74,10 @@ test.describe('Settings Page', () => {
       await expect(page.getByTestId('settings-page')).toBeVisible({ timeout: 10000 })
 
       // Should have Settings heading
-      await expect(page.getByTestId('settings-title')).toBeVisible()
-      await expect(page.getByTestId('settings-title')).toHaveText('Settings')
+      const settingsTitle = page.getByTestId('settings-title')
+        .or(page.getByTestId('settings-title-mobile'))
+      await expect(settingsTitle.first()).toBeVisible()
+      await expect(settingsTitle.first()).toHaveText('Settings')
     })
 
     test('has sidebar navigation', async ({ page }) => {

web/e2e/user-flows/settings-configuration.spec.ts

@@ -15,7 +15,8 @@ test.describe('Settings Configuration — "Change my preferences"', () => {
     const settingsPage = page.getByTestId('settings-page')
     await expect(settingsPage).toBeVisible({ timeout: ELEMENT_VISIBLE_TIMEOUT_MS })
     const title = page.getByTestId('settings-title')
-    await expect(title).toBeVisible()
+      .or(page.getByTestId('settings-title-mobile'))
+    await expect(title.first()).toBeVisible()
   })
 
   test('settings page shows configuration groups', async ({ page }) => {
@@ -117,9 +118,11 @@ test.describe('Settings Configuration — "Change my preferences"', () => {
   test('mobile: settings layout at 375px', async ({ page }) => {
     await page.setViewportSize({ width: MOBILE_WIDTH, height: MOBILE_HEIGHT })
     await setupDemoAndNavigate(page, '/settings')
-    // Now that both desktop and mobile titles use the same testid,
-    // .filter({visible: true}) ensures we get the actually-visible one
+    // At mobile width, the desktop sidebar nav (hidden lg:block) is CSS-hidden, so
+    // settings-title is not visible even though it exists in the DOM.
+    // Use .filter({visible:true}) to pick whichever title variant is actually rendered.
     const title = page.getByTestId('settings-title')
+      .or(page.getByTestId('settings-title-mobile'))
       .filter({ visible: true })
       .first()
     await expect(title).toBeVisible({ timeout: ELEMENT_VISIBLE_TIMEOUT_MS })