Force MarketPress Variation Modal 100% Width

force_mp_variation_modal_full_width.php

<?php
/* The following code forces the WPMU DEV MarketPress plugin variation
*  modal (popup) to use 100% of the active window width. This works for
*  both desktop and mobile. The code also applies custom CSS that makes 
*  the product image take 100% width of the parent container. The code
*  applies to both the Store homepage and Products page. This should be
*  added to the active theme's functions.php AFTER MarketPress has been
*  installed and activated.
*/
add_action( 'wp_footer', function(){

    if ( ! is_page( array(
        mp_get_setting( 'pages->products' ),
        mp_get_setting( 'pages->store' )
        ) ) ){
        return;
    }

    ?>
    <script type="text/javascript">
        (function($){

            $(document).ready(function(){

                $( '.mp_button-has_variations' ).each(function(){

                    let cur_button = $(this);

                    let new_button = $( '<a/>', {
                        'class': 'mp_button mp_link-buynow cboxElement',
                        href: cur_button.attr('href'),
                        text: cur_button.text()
                    });

                    var mywidth = $(window).width();
                    
                    new_button.attr( 'data-href', cur_button.data( 'href' ) ).colorbox( {

                        "close": "x",
                        "href": function() {
                            return new_button.attr( 'data-href' );
                        },
                        "overlayClose": false,
                        "trapFocus": false,
                        //"width": 630,
                        "width": mywidth,
                        "overlayClose": true,
                        "escKey": true,
                        onLoad: function() {
                            $( "#colorbox" ).removeAttr( "tabindex" ); //remove tabindex before select2 init
                        },
                        onComplete: function() {
                            $( "select.mp_select2" ).mp_select2( {
                                "dropdownCssClass": "mp_select2",
                                "dropdownAutoWidth": 1,
                                "minimumResultsForSearch": -1
                            } );
                        }
                    } );

                    cur_button.replaceWith( new_button );

                });
            });

        })(jQuery);
    </script>
    <?php
}, 10 );

add_action('wp_head', 'tweak_cboxContent_css', 100);
function tweak_cboxContent_css(){
    ?>
    <style type="text/css" media="screen">
    #cboxContent{
        margin: 0 -2px -4px !important;
        overflow:hidden !important;
    }
    #cboxLoadedContent img {
        max-width:100% !important;
        height:auto !important;
    }
    </style>
    <?php
}