[Popover]: Popover width="large" is too large when vertical scrollbar is present on the page

[ldalkee]

Problem

Popover large takes its width without accounting for the vertical scrollbar. The result is that the popover width becomes full browser width and therefore overflows outside the screen.

Solution

Popover large width must be calculated from content width, not from browser window width

Examples and information

1. create a scrollable page
2. add Popover element somewhere with width="large".
3. reduce screen size (mobile view) so that the large popover expands to whole screen
4. notice that the popover overflows horizontally and creates horizontal scrollbar in the app

Project

DoD

• The component is developed using best practices, conventions, and modern frontend trends
• The component follows BEM naming conventions (if applicable)
• The component implementation matches the Figma design, including all defined states and interactions
• The component supports responsiveness and scales across breakpoints (if applicable)
• The component does not introduce runtime errors or warnings
• Linter passes
• Component has export if needed
• The component has unit tests with at least 80% code coverage
• CodeCov passes minimum coverage threshold
• The component has passed code review
• The component has passed Chromatic visual review
• Storybook stories are created:
  • Cover all Figma variations
  • Include edge cases, empty/error states
• Component’s API (props, slots, events) is documented
• ZeroHeight is updated with design/development guidelines
• External dependencies used in the component are documented in Confluence with rationale.
• Semantic commit format is used (for semantic-release)
• External libraries comply with validated open source licenses
• Component is versioned correctly and ready for release if required
• Update statuses page in Zeroheight