Site Icon: Improve responsiveness for small screen devices.

Using Jcrop's `trueSize` argument also allows us to get rid of all that behind
the scenes temp image creating and back and forth calculating of image sizes.

Props tyxla for initial patch.
See #16434.


Built from https://develop.svn.wordpress.org/trunk@33053


git-svn-id: http://core.svn.wordpress.org/trunk@33024 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/site-icon-rtl.css

@@ -17,6 +17,10 @@
 	max-width: 720px;
 }
 
+.site-icon-crop-wrapper {
+	float: right;
+}
+
 .site-icon-crop-preview-shell {
 	float: left;
 	overflow: hidden;
@@ -55,4 +59,25 @@
 	height: 64px;
 	overflow: hidden;
 	width: 64px;
-} 
+}
+
+.site-icon-crop-shell .submit {
+	clear: both;
+}
+
+@media only screen and (max-width: 768px) {
+	.site-icon-crop-wrapper,
+	.site-icon-crop-preview-shell {
+		float: none;
+	}
+
+	.site-icon-crop-wrapper {
+		max-width: 100%;
+		margin-bottom: 20px;
+	}
+
+	.site-icon-crop-wrapper img {
+		max-width: 100%;
+		height: auto;
+	}
+}

wp-admin/css/site-icon.css

@@ -17,6 +17,10 @@
 	max-width: 720px;
 }
 
+.site-icon-crop-wrapper {
+	float: left;
+}
+
 .site-icon-crop-preview-shell {
 	float: right;
 	overflow: hidden;
@@ -55,4 +59,25 @@
 	height: 64px;
 	overflow: hidden;
 	width: 64px;
-} 
+}
+
+.site-icon-crop-shell .submit {
+	clear: both;
+}
+
+@media only screen and (max-width: 768px) {
+	.site-icon-crop-wrapper,
+	.site-icon-crop-preview-shell {
+		float: none;
+	}
+
+	.site-icon-crop-wrapper {
+		max-width: 100%;
+		margin-bottom: 20px;
+	}
+
+	.site-icon-crop-wrapper img {
+		max-width: 100%;
+		height: auto;
+	}
+}