fix(ui): region dropdown opens off-screen on mobile Channels page; quick-picks row overflows #620

Problem (mobile, Channels page)

On a phone the region filter dropdown on #/channels opens mostly off-screen to the left. Only the ends of the labels are visible ("…DK", "…d, SE"). The open menu also covers the region-group quick picks (#565).

Measured at 375×812 on staging (v0.2.7-rc4, region groups configured):

• The trigger .ch-header-region .region-dropdown-trigger spans left 10 → right 58.
• .region-dropdown-menu is position:absolute; right:0; min-width:220px. It is anchored to the trigger's right edge, so it extends leftwards to x = −162 and 162 px are cut off.
• .region-quick-picks in the same header is 448 px wide (flex-wrap: wrap, but the container itself is wider than the 375 px viewport), so the last chips can end up clipped.

Most likely the right-anchored menu was designed for headers where the trigger sits at the right. On Channels it sits at the left.

Fix

• Keep the open menu inside the viewport:
  • anchor it to the trigger's left edge when the trigger sits in the left half, or
  • clamp it with max-width: calc(100vw - 2*gutter) plus a viewport-aware left/right.
    Reuse the shared region-filter code so Packets, Nodes, Channels and the other region filters all behave the same. Do not special-case Channels.
• Make the quick-picks row fit the header width: wrap within the container, or use a horizontally scrollable strip, with no clipped chips.
• Make sure the open menu does not hide the quick picks it belongs to: render the quick picks above or below the menu, or put the menu on its own layer without covering the trigger row.

Tests

• Playwright at 320, 375 and 768 px, plus desktop, on every page with a region filter: the open menu's bounding box lies within the viewport, the quick-picks row has no chip outside its container, and there is no horizontal page overflow.
• Kill a mutant that restores right:0 on the Channels header.
• CSS variables only.