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
12

Is this regressed? It was working fine and suddenly stopped working

13

My tests are still functioning fine:

27-41-ywacu-3cx6m
27-41-ywacu-3cx6m928×436 33.8 KB

Which API version is your app is set to, and how tall is your popovers @gruntlord6?

14

They are dynamic in height but well over 500px in the tests where it is evident. They were working fine when I made that initial comment about it working and with no changes to my mockups and test implementation they stopped working in both react and HTML.

I tried using inline size with overflow but it really does not work well compared to how it was just working a few days ago.

How do you set API versions on web components? I thought it was always the same script everyone has to use from shopify cloud

15

I just tried 700px and it was fine as well. Are yours positioned at the very top within an s-section?

Oh, I’m not sure why I had Admin UI Extensions in mind for a moment. We do use the same script for embedded apps, you’re right :slight_smile: Sorry for the confusion there!

16

I am using s-box for most of my popovers which was working fine until recently. Do the popovers have to use s-stack as part of a recent change?

Edit: I just tried using the example from the documentation ( Popover ) and I get the same result when it has a lot of values:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Popover Test</title>

<script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>

</head>

<body>

<s-button commandFor="test-popover">

      Select Value

<s-icon type="caret-down"></s-icon>

</s-button>




<s-popover id="test-popover">

<s-box padding="base">

<s-stack gap="small-200">

<s-heading>Choose a value</s-heading>

<s-choice-list label="Select a value">

<s-choice value="1">1</s-choice>

<s-choice value="2">2</s-choice>

<s-choice value="3">3</s-choice>

<s-choice value="4">4</s-choice>

<s-choice value="5">5</s-choice>

<s-choice value="6">6</s-choice>

<s-choice value="7">7</s-choice>

<s-choice value="8">8</s-choice>

<s-choice value="9">9</s-choice>

<s-choice value="10">10</s-choice>

<s-choice value="11">11</s-choice>

<s-choice value="12">12</s-choice>

<s-choice value="13">13</s-choice>

<s-choice value="14">14</s-choice>

<s-choice value="15">15</s-choice>

<s-choice value="16">16</s-choice>

<s-choice value="17">17</s-choice>

<s-choice value="18">18</s-choice>

<s-choice value="19">19</s-choice>

<s-choice value="20">20</s-choice>

<s-choice value="21">21</s-choice>

<s-choice value="22">22</s-choice>

<s-choice value="23">23</s-choice>

<s-choice value="24">24</s-choice>

<s-choice value="25">25</s-choice>

<s-choice value="26">26</s-choice>

<s-choice value="27">27</s-choice>

<s-choice value="28">28</s-choice>

<s-choice value="29">29</s-choice>

<s-choice value="30">30</s-choice>

<s-choice value="31">31</s-choice>

<s-choice value="32">32</s-choice>

<s-choice value="33">33</s-choice>

<s-choice value="34">34</s-choice>

<s-choice value="35">35</s-choice>

<s-choice value="36">36</s-choice>

<s-choice value="37">37</s-choice>

<s-choice value="38">38</s-choice>

<s-choice value="39">39</s-choice>

<s-choice value="40">40</s-choice>

<s-choice value="41">41</s-choice>

<s-choice value="42">42</s-choice>

<s-choice value="43">43</s-choice>

<s-choice value="44">44</s-choice>

<s-choice value="45">45</s-choice>

<s-choice value="46">46</s-choice>

<s-choice value="47">47</s-choice>

<s-choice value="48">48</s-choice>

<s-choice value="49">49</s-choice>

<s-choice value="50">50</s-choice>

<s-choice value="51">51</s-choice>

<s-choice value="52">52</s-choice>

<s-choice value="53">53</s-choice>

<s-choice value="54">54</s-choice>

<s-choice value="55">55</s-choice>

<s-choice value="56">56</s-choice>

<s-choice value="57">57</s-choice>

<s-choice value="58">58</s-choice>

<s-choice value="59">59</s-choice>

<s-choice value="60">60</s-choice>

<s-choice value="61">61</s-choice>

<s-choice value="62">62</s-choice>

<s-choice value="63">63</s-choice>

<s-choice value="64">64</s-choice>

<s-choice value="65">65</s-choice>

<s-choice value="66">66</s-choice>

<s-choice value="67">67</s-choice>

<s-choice value="68">68</s-choice>

<s-choice value="69">69</s-choice>

<s-choice value="70">70</s-choice>

<s-choice value="71">71</s-choice>

<s-choice value="72">72</s-choice>

<s-choice value="73">73</s-choice>

<s-choice value="74">74</s-choice>

<s-choice value="75">75</s-choice>

<s-choice value="76">76</s-choice>

<s-choice value="77">77</s-choice>

<s-choice value="78">78</s-choice>

<s-choice value="79">79</s-choice>

<s-choice value="80">80</s-choice>

<s-choice value="81">81</s-choice>

<s-choice value="82">82</s-choice>

<s-choice value="83">83</s-choice>

<s-choice value="84">84</s-choice>

<s-choice value="85">85</s-choice>

<s-choice value="86">86</s-choice>

<s-choice value="87">87</s-choice>

<s-choice value="88">88</s-choice>

<s-choice value="89">89</s-choice>

<s-choice value="90">90</s-choice>

<s-choice value="91">91</s-choice>

<s-choice value="92">92</s-choice>

<s-choice value="93">93</s-choice>

<s-choice value="94">94</s-choice>

<s-choice value="95">95</s-choice>

<s-choice value="96">96</s-choice>

<s-choice value="97">97</s-choice>

<s-choice value="98">98</s-choice>

<s-choice value="99">99</s-choice>

<s-choice value="100">100</s-choice>

</s-choice-list>

</s-stack>

</s-box>

</s-popover>

</body>

</html>
17

No, it doesn’t have to be. I just needed to confirm how you were running into the issue. I tried the code above and still ended up with:

28-37-udvgm-jr36i
28-37-udvgm-jr36i460×1666 40.5 KB

Can you try forking this codesandbox and see if the issue occurs there?
https://codesandbox.io/p/sandbox/38m9k4

18

Thats the issue, it goes off the page. Before it was automatically fitting and providing a scroll.
https://codesandbox.io/p/sandbox/38m9k4

Feb 2026: Updates to the Admin Polaris component library
19

Oh, I see what you mean now, the scroll behavior.

Let me look into this and check whether anything in the recent changes could have affected it.

20

I was able to confirm this was caused by the recent change. I’ll post an update here as soon as the fix is rolled out.

Thanks for flagging this for us @gruntlord6.

1 Like
21

Any updates on this?

22

Hi @gruntlord6,

The fix is not quite available yet. I’ll provide an update when it’s ready.