From c2f15bc83b57b831b1a9c2eae7a54fe0e8fa1d90 Mon Sep 17 00:00:00 2001
From: Mark Jaquith <markjaquith@git.wordpress.org>
Date: Wed, 5 Dec 2012 10:15:42 +0000
Subject: [PATCH] Better responsive breakpoints for the Gallery editing screen.
 props koopersmith. fixes #22741

git-svn-id: https://develop.svn.wordpress.org/trunk@23071 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-includes/css/media-views.css | 34 ++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css
index bdcdf34cd5..85dc99dfa3 100644
--- a/wp-includes/css/media-views.css
+++ b/wp-includes/css/media-views.css
@@ -154,14 +154,17 @@
 	height: 60px;
 	padding: 0 16px;
 	border: 0 solid #dfdfdf;
+	overflow: hidden;
 }
 
 .media-toolbar-primary {
 	float: right;
+	height: 100%;
 }
 
 .media-toolbar-secondary {
 	float: left;
+	height: 100%;
 }
 
 .media-toolbar-primary > .media-button,
@@ -1491,6 +1494,13 @@
 	float: left;
 }
 
+@media only screen and (max-width: 960px) {
+	.media-frame-content .media-toolbar-primary .search,
+	.media-frame-content .media-toolbar-secondary .attachment-filters {
+		max-width: 120px;
+	}
+}
+
 /**
  * Responsive layout
  */
@@ -1548,17 +1558,6 @@
 		width: auto;
 	}
 
-	.media-frame-content .media-toolbar-primary,
-	.media-frame-content .media-toolbar-secondary {
-		display: inline;
-		float: none;
-	}
-
-	.media-frame-content .media-toolbar-primary .search,
-	.media-frame-content .media-toolbar-secondary select {
-		max-width: 45%;
-	}
-
 	.media-frame input,
 	.media-frame textarea,
 	.media-frame .search {
@@ -1586,6 +1585,19 @@
 	}
 }
 
+@media only screen and (max-width: 800px) {
+	.media-frame-content .media-toolbar .instructions {
+		display: none;
+	}
+}
+
+@media only screen and (max-width: 680px) {
+	.media-frame-content .media-toolbar .search,
+	.media-frame-content .media-toolbar .attachment-filters {
+		max-width: 85px;
+	}
+}
+
 /* Use the same min-width as in the admin */
 @media only screen and (max-width: 600px) {
 	.media-modal {