fix(mobile): setting item popover cannot be closed (#8910)

fix AF-1798

tests/affine-mobile/e2e/settings.spec.ts

@@ -0,0 +1,60 @@
+import { test } from '@affine-test/kit/mobile';
+import { expect, type Page } from '@playwright/test';
+
+const openSettings = async (page: Page) => {
+  await page.getByTestId('settings-button').click();
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await expect(page.locator('header:has-text("Settings")')).toBeVisible();
+};
+
+test('can open settings', async ({ page }) => {
+  await openSettings(page);
+});
+
+test('can change theme', async ({ page }) => {
+  await openSettings(page);
+  await page
+    .getByTestId('setting-row')
+    .filter({
+      hasText: 'Color mode',
+    })
+    .getByTestId('dropdown-select-trigger')
+    .click();
+
+  await expect(
+    page.getByRole('dialog').filter({
+      has: page.getByRole('menuitem', { name: 'Light' }),
+    })
+  ).toBeVisible();
+
+  await page.getByRole('menuitem', { name: 'Dark' }).click();
+
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+});
+
+test('can close change theme popover by clicking outside', async ({ page }) => {
+  await openSettings(page);
+  await page
+    .getByTestId('setting-row')
+    .filter({
+      hasText: 'Color mode',
+    })
+    .getByTestId('dropdown-select-trigger')
+    .click();
+
+  const themePopover = page.getByRole('dialog').filter({
+    has: page.getByRole('menuitem', { name: 'Light' }),
+  });
+
+  await expect(themePopover).toBeVisible();
+
+  // get a mouse position that is 10px offset to the top of theme popover
+  // and click
+  const mousePosition = await themePopover.boundingBox();
+  if (!mousePosition) {
+    throw new Error('theme popover is not visible');
+  }
+  await page.mouse.click(mousePosition.x, mousePosition.y - 10);
+
+  await expect(themePopover).not.toBeVisible();
+});