feat: allow for specifying a custom width for the profile popup

[jimmyhogoboom]

🐛 Issue

Closes #233

The profile popup width is based on the viewport width by default, and is absolutely positioned so its width isn't controlled by its container.

✏️ Solution

Implement a new data prop data-search-profile-size which takes a CSS width string, allowing the consumer to specify whatever width they need.

Also nudge the popup to the right 15px to align it with the search bar.

🔬 To Test

I haven't been able to reproduce this locally, only was able to test by directly editing the source in the browser to apply the styling changes.

📸 Screenshots

With data-search-profile-size set to 365px:

[linear[bot]]

APO-1017 (Seacoast) (Web) Alignment on search pop out is off

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
apollos-micro-service	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 25, 2024 5:06pm
apollos-web-embeds	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 25, 2024 5:06pm

[redreceipt]

Have you talked to Josh about this solution? If I understand correctly, he'll have to set this on every single customer site?

[redreceipt]

Follow up question, can we set a sane default that can be overridden if necessary?

[jimmyhogoboom]

@redreceipt I have not, I can reach out to him. He should only have to set this in places where the current pop-up doesn't fit, so it will depend on the specific use cases.

Regarding a default to override, I think that's what we have in this PR. The existing behavior would be the default, and setting this new data-search-profile-size attribute would be the override.

[redreceipt]

Got it! Ok we'll merge this and I'll make sure he knows to set this variable if he needs it.