Disable body scrolling when session expired log in modal is open.

Fixes also the missing close icon if screen width is less than 380px.

props adamsilverstein, ocean90.
fixes #31610.

git-svn-id: https://develop.svn.wordpress.org/trunk@31945 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/css/wp-auth-check.css

@@ -34,6 +34,14 @@
 	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
 }
 
+@media screen and ( max-width: 380px ) {
+	#wp-auth-check-wrap #wp-auth-check {
+		left: 0;
+		width: 100%;
+		margin: 0;
+	}
+}
+
 #wp-auth-check-wrap.fallback #wp-auth-check {
 	max-height: 180px;
 	overflow: auto;
@@ -44,12 +52,13 @@
 	-webkit-background-size: 16px 16px;
 	background-size: 16px 16px;
 	height: 100%;
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
 }
 
 #wp-auth-check-wrap #wp-auth-check-form iframe {
-	height: 100%;
+	height: 98%; /* Scrollbar fix */
 	width: 100%;
-	overflow: auto;
 }
 
 #wp-auth-check-wrap .wp-auth-check-close {

src/wp-includes/js/wp-auth-check.js

@@ -49,6 +49,7 @@
 			$('#wp-auth-check-form').append( frame );
 		}
 
+		$( 'body' ).addClass( 'modal-open' );
 		wrap.removeClass('hidden');
 
 		if ( frame ) {
@@ -80,6 +81,7 @@
 		wrap.fadeOut( 200, function() {
 			wrap.addClass('hidden').css('display', '');
 			$('#wp-auth-check-frame').remove();
+			$( 'body' ).removeClass( 'modal-open' );
 		});
 	}