fix(packets): keep Saved-filter menu inside the viewport (#72)

[dborup]

Fixes #72

Problem

On Latest Packets, the Saved button sits at the right end of the filter-expression row. .fux-saved-menu was anchored left: 0 to that button bar and had no max-width, so it grew to fit its longest expression (467px with the built-in filters) and ran past the right edge of the viewport. #pktLeft (overflow-x: auto) then scrolled horizontally.

Reproduced on 96319acc against the e2e fixture:

Viewport	Menu right edge	#pktLeft scrollWidth
1440	1756	1756
1024	1346	–
900	1225	1225
768	1097	–

At ≤600px the filter-expression row is hidden (#pktLeft .pkt-filter-expr { display: none !important }), so this only affects wider layouts.

Fix

CSS only, one rule in public/style.css:

• left: 0 → right: 0 (the menu opens leftward from the button)
• width: max-content; max-width: min(480px, calc(100vw - 32px)), so the existing .fux-saved-expr ellipsis applies to long user filters

This follows the same pattern #74 used for the path-legend popover. The built-in filters still fit untruncated (467px ≤ 480px).

Tests

• test-filter-ux-e2e.js (already in the Playwright CI step) gets a new step at 1400, 1024 and 768px. Each run adds a long user-saved filter and asserts that:
  • the menu stays inside the viewport,
  • #pktLeft has no horizontal overflow,
  • the long expression is ellipsized.
• Before the fix: 3/3 fail (menu right edge 2250/1880/1630, pane overflow 850–862px). After the fix: 12/12 pass.
• Related layout suites also pass locally against the fixture server: test-issue-1128-packets-layout-e2e.js 5/5, test-issue-1128-multi-viewport-e2e.js 15/15, test-issue-1122-details-row-clamp-e2e.js 18/18. scripts/check-css-vars.js OK, and git diff --check is clean.
• I checked light mode at 1440px and dark mode at 768px visually: the menu is right-aligned under Saved and fully visible.

No workflow, JS or backend changes. This is not a hot path.

🤖 Generated with Claude Code