Use flexbox for positioning popup

Problem description

To improve the responsiveness of the popup, I suggest using Flexbox positioning. By using align-items and justify-content, it is possible to set the popup's position without relying on calculations based on its width. Additionally, a percentage-based width can also be set.

To achieve this result, the JavaScript needs to be updated so that the class with the position is added directly to "modalElement."

JS and CSS example

When modalElement.style.display is set to 'block', it needs to be set to 'flex', and the class assignement can be simplified like the following example:

        const modalElement = document.querySelector('.' + modal_class);

        // Inject layout class and styles
        switch (values.layout) {
          // Top left.
          case 0:
            modalElement.classList.add('spb_top_left');
            break;
          // Top right.
          case '1':
            modalElement.classList.add('spb_top_right');
            break;
          // Bottom left.
          case '2':
            modalElement.classList.add('spb_bottom_left');
            break;
          // Bottom right.
          case '3':
            modalElement.classList.add('spb_bottom_right');
            break;
          // Center.
          case '4':
            modalElement.classList.add('spb_center');
            break;
          // Top Center.
          case '5':
            modalElement.classList.add('spb_top_center');
            break;
          // Top bar.
          case '6':
            modalElement.classList.add('spb_top_bar');
            break;
          // Bottom bar.
          case '7':
            modalElement.classList.add('spb_bottom_bar');
            break;
          // Left bar.
          case '8':
            modalElement.classList.add('spb_left_bar');
            break;
          // Right bar.
          case '9':
            modalElement.classList.add('spb_right_bar');
            break;
        }

And this is an example of CSS:

.simple-popup-blocks-global .spb_overlay{
    background-color: rgba(0, 0, 0, 0.3);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999999;
  }
.simple-popup-blocks-global .spb_overlay.spb_top_left{
      align-items: flex-start;
      justify-content: flex-start;
    }
.simple-popup-blocks-global .spb_overlay.spb_top_right{
      align-items: flex-start;
      justify-content: flex-end;
    }
.simple-popup-blocks-global .spb_overlay.spb_bottom_left{
      align-items: flex-end;
      justify-content: flex-start;
    }
.simple-popup-blocks-global .spb_overlay.spb_bottom_right{
      align-items: flex-end;
      justify-content: flex-end;
    }
.simple-popup-blocks-global .spb_overlay.spb_center{
      align-items: center;
      justify-content: center;
    }
.simple-popup-blocks-global .spb_overlay.spb_top_center{
      align-items: flex-start;
      justify-content: center;
    }
.simple-popup-blocks-global .spb_overlay.spb_top_bar{
      align-items: flex-start;
      justify-content: center;
    }
.simple-popup-blocks-global .spb_overlay.spb_top_bar .spb-popup-main-wrapper{
        width: 100%;
      }
.simple-popup-blocks-global .spb_overlay.spb_bottom_bar{
      align-items: flex-end;
      justify-content: center;
    }
.simple-popup-blocks-global .spb_overlay.spb_bottom_bar .spb-popup-main-wrapper{
        width: 100%;
      }
.simple-popup-blocks-global .spb_overlay.spb_left_bar{
      align-items: center;
      justify-content: flex-start;
    }
.simple-popup-blocks-global .spb_overlay.spb_left_bar .spb-popup-main-wrapper{
        height: 100%;
      }
.simple-popup-blocks-global .spb_overlay.spb_right_bar{
      align-items: center;
      justify-content: flex-end;
    }
.simple-popup-blocks-global .spb_overlay.spb_right_bar .spb-popup-main-wrapper{
        height: 100%;
      }

Let me know if this could be officially implemented.