Paint the bar around the Dynamic Island in the theme's background (#147)

The page named no theme-color, so the status bar iOS draws around the Dynamic Island was its own
black or white, a band across the top of every theme. The page and the admin page now carry one,
set to the page's background whenever the theme or mode changes; Android's toolbar takes it too.
Not seen on a phone yet: the browser test checks the colour matches, not what iOS does with it.

A browser test at 360px covers this and #146's row of buttons. The stub DOM gains
getComputedStyle, which every browser has.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tests/ui/app.spec.js

@@ -1656,3 +1656,20 @@ test('a refresh button turns while what it checks is being checked', async ({ pa
   await page.evaluate(() => setScanning('multi-show', false));
   expect(await spin('#scanAll .i')).toBe('none');
 });
+
+test.describe('on a narrow phone', () => {
+  test.use({ viewport: { width: 360, height: 760 } });
+
+  test("a feed's buttons stay on one row, and the bar round the island is the page's colour", async ({ page }) => {
+    // Seven 44px buttons did not fit 360px, and Unsubscribe went onto a row of its own (#146).
+    await page.locator('#burger').click();
+    await page.locator('.feed', { hasText: 'Test Show' }).first().click();
+    const tops = await page.locator('#content .acts .btn').evaluateAll(bs => bs.map(b => b.getBoundingClientRect().top));
+    expect(tops.length).toBe(7);
+    expect(new Set(tops).size).toBe(1);
+    // iOS paints the status bar round the Dynamic Island in theme-color, its own black or white
+    // without one (#147).
+    expect(await page.evaluate(() => document.querySelector('meta[name=theme-color]').content))
+      .toBe(await page.evaluate(() => getComputedStyle(document.body).backgroundColor));
+  });
+});