From 002dd563e01446745ba3afe9dd3ea25c2cf3e52c Mon Sep 17 00:00:00 2001
From: Boone Gorges <boonebgorges@git.wordpress.org>
Date: Wed, 8 Jul 2015 21:01:40 +0000
Subject: [PATCH] Improvements to responsive styling on my-sites.php.

* Ensure that floated elements break to a new line at the end of a row.
* Allow enough vertical space for long site titles.
* Give more breathing room to cells at narrow widths.

Fixes #31685.

git-svn-id: https://develop.svn.wordpress.org/trunk@33135 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css | 35 ++++++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 7de0696d4f..1e46d9b5b4 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -3042,15 +3042,21 @@ img {
 	display: block;
 	overflow: auto;
 	zoom: 1;
-	border: 1px solid #e5e5e5;
 }
 
 .my-sites li {
 	display: block;
-	padding: 8px 1%;
+	padding: 8px 3%;
+	min-height: 130px;
 	margin: 0;
 }
 
+@media only screen and (max-width: 599px) {
+	.my-sites li {
+		min-height: 0;
+	}
+}
+
 @media only screen and (min-width: 600px) {
 	.my-sites.striped li {
 		background-color: #fff;
@@ -3070,11 +3076,14 @@ img {
 @media only screen and (min-width: 600px) and (max-width: 699px) {
 	.my-sites li{
 		float: left;
-		width: 48%;
+		width: 44%;
 	}
 	.my-sites.striped li {
 		background-color: #fff;
 	}
+	.my-sites.striped li:nth-of-type(2n+1) {
+		clear: left;
+	}
 	.my-sites.striped li:nth-of-type(2n+2):after {
 		content: none;
 	}
@@ -3088,7 +3097,7 @@ img {
 @media only screen and (min-width: 700px) and (max-width: 1199px) {
 	.my-sites li {
 		float: left;
-		width: 31.333333%;
+		width: 27.333333%;
 		background-color: #fff;
 	}
 	.my-sites.striped li:nth-of-type(3n+3):after {
@@ -3104,9 +3113,13 @@ img {
 @media only screen and (min-width: 1200px) and (max-width: 1399px) {
 	.my-sites li {
 		float: left;
-		width: 23%;
+		width: 21%;
+		padding: 8px 2%;
 		background-color: #fff;
 	}
+	.my-sites.striped li:nth-of-type(4n+1) {
+		clear: left;
+	}
 	.my-sites.striped li:nth-of-type(4n+4):after {
 		content: none;
 	}
@@ -3121,9 +3134,13 @@ img {
 @media only screen and (min-width: 1400px) and (max-width: 1599px) {
 	.my-sites li {
 		float: left;
-		width: 18%;
+		width: 16%;
+		padding: 8px 2%;
 		background-color: #fff;
 	}
+	.my-sites.striped li:nth-of-type(5n+1) {
+		clear: left;
+	}
 	.my-sites.striped li:nth-of-type(5n+5):after {
 		content: none;
 	}
@@ -3139,9 +3156,13 @@ img {
 @media only screen and (min-width: 1600px) {
 	.my-sites li {
 		float: left;
-		width: 14.666666%;
+		width: 12.666666%;
+		padding: 8px 2%;
 		background-color: #fff;
 	}
+	.my-sites.striped li:nth-of-type(6n+1) {
+		clear: left;
+	}
 	.my-sites.striped li:nth-of-type(6n+6):after {
 		content: none;
 	}