Responsive options layout, toolbar-icon toggles panel, settings link in empty state

[ridaken]

Three changes from testing in Firefox.

Responsive options page

The settings page arranged rows by fixed side-by-side layout, which squished labels and wrapped text awkwardly in the narrow about:addons options view. Now:

• Each settings card is a CSS container-query context (@container).
• Each Row stacks (label above control) on narrow widths and switches to side-by-side at >=28rem (@md) — so it adapts to the actual available width, not pixels.
• Wide controls (the shortcut input + Save/Reset, the debounce slider, the launch-button row) now wrap/flex instead of crowding the label.

Toolbar icon toggles the panel

Removed the popup entrypoint, so clicking the pinned icon now opens/closes the slide-out directly via action.onClicked → toggleActiveTab (already wired in the background). No more intermediate menu.

"Open settings" link in the empty state

With the popup gone, the empty-state flyout gets an Open settings link. Content scripts can't call runtime.openOptionsPage, so it sends a new OPEN_OPTIONS message that the background handles.

Tests

• components/__tests__/EmptyState.test.tsx — the settings link sends OPEN_OPTIONS; a recent chip calls onPick; the no-matches message renders.
• lib/__tests__/messaging.test.ts — both message guards.
• npm run compile, npm test (51 pass), npm run build, npm run build:firefox all green. Verified the built manifests have action/browser_action with no default_popup, and the container-query CSS is emitted.

Manual check (Firefox first)

Load .output/firefox-mv2 via about:debugging: the toolbar icon toggles the panel; the options page (both in about:addons and opened full-width) reflows cleanly with no squished labels; the empty flyout's "Open settings" opens the options page.

Note: branched off main; independent of the still-open results-nav PR (no file overlap).

🤖 Generated with Claude Code