fix: fix popper.js modifiers

packages/oui-criteria/src/adder/criteria-adder.html

@@ -1,4 +1,4 @@
-<oui-dropdown align="{{::$ctrl.align}}" arrow persistent>
+<oui-dropdown align="{{::$ctrl.placement}}" arrow persistent>
     <button type="button" class="oui-criteria-adder__button oui-button oui-button_secondary oui-button_icon-only oui-button_small-width"
         oui-dropdown-trigger>
         <span class="oui-icon oui-icon-filter" aria-hidden="true"></span>

packages/oui-dropdown/src/dropdown.controller.js

@@ -145,7 +145,19 @@ export default class {
         this.popperElement.style.minWidth = `${this.getTriggerWidth()}px`;
 
         this.popper = new Popper(this.triggerElement, this.popperElement, {
-            placement
+            placement,
+            modifiers: {
+                flip: {
+                    boundariesElement: "viewport"
+                },
+                keepTogether: {
+                    enabled: true
+                },
+                preventOverflow: {
+                    boundariesElement: "viewport",
+                    escapeWithReference: true
+                }
+            }
         });
     }
 

packages/oui-popover/src/popover.controller.js

@@ -144,8 +144,15 @@ export default class PopoverController {
         this.popper = new Popper(this.triggerElement, this.popperElement, {
             placement: this.placement,
             modifiers: {
+                flip: {
+                    boundariesElement: "viewport"
+                },
+                keepTogether: {
+                    enabled: true
+                },
                 preventOverflow: {
-                    boundariesElement: this.$document[0].body
+                    boundariesElement: "viewport",
+                    escapeWithReference: true
                 }
             }
         });