fix(web-ui): align device status card and sharpen appearance preview

[kev1n77]

Summary

• Align the device status popover with the shared card layout, including centered headings, device artwork, spacing, and the primary connection action.
• Preserve connected-device details, connection-service status, retry behavior, and return-to-local controls.
• Replace the 240×97 default appearance thumbnail with 960×480 artwork, correct its crop, and render the selection indicator separately.
• Add regression coverage for device presentation and high-density appearance previews.

Fixes #

Type and Areas

Type: Bug fix / UI/UX / test

Areas: Web UI — navigation device status and appearance settings

Motivation / Impact

The device status popover did not match the intended visual hierarchy, and the default appearance thumbnail looked blurry on high-density displays.

This update improves device identification and status readability while keeping the default appearance preview and selection indicator sharp.

Verification

Implementation-stage verification:

• pnpm run check:web — passed.
• pnpm --dir src/web-ui run test:run src/infrastructure/config/components/AppearancePackageConfigSection.test.tsx src/infrastructure/config/components/AppearanceSettingsPage.test.tsx — 2 files, 6 tests passed.
• Appearance settings SCSS compilation — passed.

PR preparation:

• git diff --check upstream/1.0.0-explore...HEAD — passed.
• Confirmed the changed files match the previously validated implementation after rebase. Runtime checks were not rerun during PR preparation.

Remote scenarios were not exercised against live hosts. Device-status tests cover simulated peer-device, remote-control, and detached-execution states; these are not end-to-end remote verification.

Reviewer Notes

• Presentation-only changes; no backend protocols, persisted data formats, or migrations.
• Device artwork is selected from device kind/name, not the controller's operating system. Unrecognized devices use neutral artwork.
• Built-in and imported appearance previews retain their existing loading behavior.
• The new artwork filename avoids reusing the cached low-resolution resource.
• Review long device names, connected-device states, and high-density display rendering.

Checklist

• This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
• Relevant verification is recorded above, or skipped checks are explained.
• User-facing strings, docs, and locales are updated where applicable.