feat(PowerSearch): add popoverMaxWidth prop

[athz]

Summary

Adds an optional popoverMaxWidth prop to PowerSearch that caps the filter-editor popover width while ensuring it never exceeds the anchor width.

Problem

When PowerSearch is anchored to a full-width bar (e.g. a page-wide filter bar), the editor popover stretches to match the bar — often 1000px+ — making the 2–3 field form inside it needlessly wide and harder to scan.

There is currently no way for consumers to constrain this: menuWidth only affects the field/search dropdown, not the editor popover. The popover layer styles are hardcoded with no prop or CSS variable escape hatch.

Solution

A single optional prop:

<PowerSearch popoverMaxWidth={720} ... />

When set, applies max-width: min(Npx, anchor-size(width)) to the editor popover layer. This means:

• Narrow anchor (e.g. 400px): popover = 400px (anchor wins, unchanged)
• Wide anchor (e.g. 1400px), maxWidth=720: popover = 720px (cap wins)
• Prop omitted: no max-width, current behavior preserved

The min() clamp guarantees the popover never exceeds its anchor regardless of the value passed.

Changes

• PowerSearch.tsx: new popoverMaxWidth prop, applied as inline style.maxWidth on the popover render call
• PowerSearch.test.tsx: test verifying the style is applied
• PowerSearch.doc.mjs: prop documented in all locale sections

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 29, 2026 4:30am

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

PowerSearch _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	3853	-
Complexity	N/A	Very High (343)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB

Accessibility Audit

Status: 1 accessibility violation(s) found — 1 serious.

PowerSearch - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/26 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

[cixzhang]

The legibility problem is real, but popoverMaxWidth puts an internal readability policy at every callsite. It also does not behave as documented below 400px because the existing minimum wins; the current test stays green when the cap is ineffective, and generated docs duplicate the prop.

Please define one internal readable width and keep the clamped editor near the interaction point rather than adding this public prop.

[Reviewed by Robohands]