Popup size is too narrow in case of pageContainer is smaller than a full window

[slavap]

Let's say there are left and right blocks (not related to jqm application), and pageContainer just placed between them.

Then _clampPopupWidth method should be fixed like that:

    _clampPopupWidth: function( infoOnly ) {
        var menuSize,
            windowCoordinates = getWindowCoordinates( this.window ),
            // rectangle within which the popup must fit
            rectangle = {
                x: this._tolerance.l,
                y: windowCoordinates.y + this._tolerance.t,
                cx: windowCoordinates.cx - this._tolerance.l - this._tolerance.r,
                cy: windowCoordinates.cy - this._tolerance.t - this._tolerance.b
            };
        
        var winW = this.window[0].innerWidth || this.window.width();
        var pgc = $.mobile.pageContainer;
        var pgcW = pgc.innerWidth();
        var pgcOft = pgc.offset();
        
        // pageContainer clips its content, so popups must be positioned within pageContainer's bounds.
        // pageContainer may have "position: relative", and then popups will be absolute positioned within pageContainer. 
        // adjusting rectangle to pageContainer's coordinates in browser window.   
        rectangle.rc.x += pgcOft.left;
        var rightXoft = winW - (pgcOft.left + pgcW);
        rectangle.rc.cx -= (pgcOft.left + rightXoft);

        if ( !infoOnly ) {
            // Clamp the width of the menu before grabbing its size
            this._ui.container.css( "max-width", rectangle.cx );
        }

        menuSize = {
            cx: this._ui.container.outerWidth( true ),
            cy: this._ui.container.outerHeight( true )
        };

        return { rc: rectangle, menuSize: menuSize };
    }

With high probability pageContainer will have "position: relative" defined, because it's natural to expect that everything (panels, popups, ...) will be positioned inside of pageContainer's bounds.
Fixed _clampPopupWidth is still calculating popup position related to window (which is not always right), but rest of the popup's code somehow manage to properly place popup even in relative pageContainer.

Actually, there could be even more complicated case, when there are max-width restrictions on page and pageContainer. Then code of _clampPopupWidth should be even more complex, like this:

    $.mobile.maxPageWidth = 1300;
    
    _clampPopupWidth: function( infoOnly ) {
        var menuSize,
            windowCoordinates = getWindowCoordinates( this.window ),
            // rectangle within which the popup must fit
            rectangle = {
                x: this._tolerance.l,
                y: windowCoordinates.y + this._tolerance.t,
                cx: windowCoordinates.cx - this._tolerance.l - this._tolerance.r,
                cy: windowCoordinates.cy - this._tolerance.t - this._tolerance.b
            };
        
        var winW = this.window[0].innerWidth || this.window.width();
        var pgc = $.mobile.pageContainer;
        var pgcW = pgc.innerWidth();
        var pgcOft = pgc.offset();
        
        // pageContainer clips its content, so popups must be positioned within pageContainer's bounds.
        // pageContainer may have "position: relative", and then popups will be absolute positioned within pageContainer. 
        // adjusting rectangle to pageContainer's coordinates in browser window.   
        rectangle.rc.x += pgcOft.left;
        var rightXoft = winW - (pgcOft.left + pgcW);
        rectangle.rc.cx -= (pgcOft.left + rightXoft);
        
        var MAX_WIDTH = $.mobile.maxPageWidth;
        if (!MAX_WIDTH || pgcW < MAX_WIDTH) {
        } else {
            var actPg = pgc.pagecontainer( "getActivePage" );
            // theoretically page width could be shorter than pageContainer width, 
            // and page could be centered as well, so let's position popups at page starting position. 
            var leftXoft = actPg ? actPg.offset().left : pgcOft.left;
            var delta = leftXoft - pgcOft.left;
            if (delta > 0) {
                rslt.rc.x += delta;
                rslt.rc.cx -= delta;
            }
        }

        if ( !infoOnly ) {
            // Clamp the width of the menu before grabbing its size
            this._ui.container.css( "max-width", rectangle.cx );
        }

        menuSize = {
            cx: this._ui.container.outerWidth( true ),
            cy: this._ui.container.outerHeight( true )
        };

        return { rc: rectangle, menuSize: menuSize };
    }