Cms: Replicator doesn't recognize popover position correctly when there are many options

[WiebkeVog]

Bug Description

The popover position isn't recognized correctly with a large selection of options ( >= 18 ) in a Replicator Fieldtype. For this, all sets must be collapsed and you should try to add a new set in the second place. After a resize event the position is recognized correctly again.
(Chrome 87.0.4280.88 & Firefox 83.0)

How to Reproduce

1. create Replicator Fieldtype with at least 18 options
2. create entry and specify two sets
3. page reload
4. collapse sets and try to add a new one after the first one
5. popover with options opens upwards

Extra Detail

Environment

Statamic version: 3.0.31

PHP version: 7.3.14

Install method (choose one):

• Fresh install from statamic/statamic
• Starter kit
• Existing Laravel app
• Other (please explain this magic!)

[duncanmcclean]

Confirmed. For future testing, here's a replicator field with 18 sets (so you don't need to create them manually)

      -
        handle: replicator
        field:
          collapse: false
          sets:
            set_1:
              display: 'Set 1'
              fields: {  }
            set_2:
              display: 'Set 2'
              fields: {  }
            set_3:
              display: 'Set 3'
              fields: {  }
            set_4:
              display: 'Set 4'
              fields: {  }
            set_5:
              display: 'Set 5'
              fields: {  }
            set_6:
              display: 'Set 6'
              fields: {  }
            set_7:
              display: 'Set 7'
              fields: {  }
            set_8:
              display: 'Set 8'
              fields: {  }
            set_9:
              display: 'Set 9'
              fields: {  }
            set_10:
              display: 'Set 10'
              fields: {  }
            set_11:
              display: 'Set 11'
              fields: {  }
            set_12:
              display: 'Set 12'
              fields: {  }
            set_13:
              display: 'Set 13'
              fields: {  }
            set_14:
              display: 'Set 14'
              fields: {  }
            set_15:
              display: 'Set 15'
              fields: {  }
            set_16:
              display: 'Set 16'
              fields: {  }
            set_17:
              display: 'Set 17'
              fields: {  }
            set_18:
              display: 'Set 18'
              fields: {  }
          display: Replicator
          type: replicator
          icon: replicator
          listable: hidden

[WiebkeVog]

Unfortunately we are struggling a bit with this bug, so we have activated the scroll event as a workaround. When scrolling, the popover is realigned, which helps a bit.