S-popover positions off screen when it's tall

Polaris
1

Hi there. The s-popover positioning logic seems off for tall popovers when positioning the popover below the controller would cause the bottom of the popover to go off screen. In these cases, it positions above the controlling button and is almost entirely invisible. While having tall popovers like this isn’t good, it seems like showing more would be better than less.

You can test this easily:

import { useId } from "react";

export default function WrongWayPopover() {
  const smallPopover = useId();
  const mediumPopover = useId();
  const largePopover = useId();

  return (
    <s-page heading="Additional">
      <s-stack direction="inline" gap="small-300">
        <s-button commandFor={largePopover} command="--toggle">
          Large
        </s-button>
        <s-button commandFor={mediumPopover} command="--toggle">
          Medium
        </s-button>
        <s-button commandFor={smallPopover} command="--toggle">
          Small
        </s-button>
      </s-stack>
      <s-popover id={smallPopover} minBlockSize="200px">
        This is a small popover.
      </s-popover>
      <s-popover id={mediumPopover} minBlockSize="500px">
        This is a medium popover.
      </s-popover>
      <s-popover id={largePopover} minBlockSize="1200px">
        This is a large popover.
      </s-popover>
    </s-page>
  );
}

With the large popover (on my screen), it does this:

image
image1126×526 14.3 KB

2

This is much bigger issue on mobile, as it’s not hard for the popover to get taller than the mobile screen.

3

Have you been able to find a solution for this issue?

4

In the interim I am setting the max block size so the popovers don’t get to tall – but this leads to them being smaller than they need to be (with unnecessary scrolling) on some screens. I’m hoping the folks at Shopify (@KyleG-Shopify, @Anthony_Frehner, @Alan_G, et al) will make sure this gets prioritised on their internal tracker.

5

I would also like to raise this issue. It’s the only web component that has scaling issues and it’s bad enough I have to use react popovers despite having everything designed and ready to go as a web component

6

Hi all,

Thanks for reporting this to us. We’ve noted this as an issue to address, though we can’t provide an ETA at this time.

7

Thank you, I would like to remove the polaris react from all our applications but the popover functionality is a blocker right now for anything with dynamic content.

I look forward to a fix

10

Hello all, this issue has now been resolved.
If you are encountering any further issues with popovers, please let us know!

1 Like
11

Thank you! it works great.

1 Like