From 573966373b6e1a6219dea5f873aea81927255111 Mon Sep 17 00:00:00 2001
From: Chris Runnells <chris.runnells@automattic.com>
Date: Fri, 13 Sep 2019 05:50:31 -1000
Subject: [PATCH] Fix mobile styles for filter menu on plugin install page

Changes the page navigation so links are shown in a vertical list instead of inline (for better readability), and fix the search box so it's always next to the dropdown and flexes with the browser window width.
---
 modules/calypsoify/style.scss | 45 +++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/modules/calypsoify/style.scss b/modules/calypsoify/style.scss
index 62e5206037fa..7274b43a1e3d 100644
--- a/modules/calypsoify/style.scss
+++ b/modules/calypsoify/style.scss
@@ -612,6 +612,19 @@ body,
 	border-bottom: 2px solid $muriel-gray-700;
 }
 
+@media only screen and (max-width:480px) {
+	.filter-links,
+	.filter-links li,
+	.filter-links li a {
+		display: block;
+	}
+
+	.filter-links li > a {
+		font-size: 16px;
+	}
+}
+
+
 .count {
 	display: inline-block;
 	padding: 1px 6px;
@@ -789,6 +802,38 @@ div.mce-toolbar-grp,
 
 .wp-filter .search-form {
 	margin-right: 10px;
+
+	@media only screen and (max-width:1000px) {
+		margin-left: 10px;
+	}
+
+	@media only screen and (max-width: 782px) {
+		input[type="search"].wp-filter-search {
+			padding: 5px;
+		}
+	}
+
+	@media only screen and (max-width:480px) {
+		&.search-plugins {
+			align-items: center;
+			display: flex;
+
+			.wp-filter-search {
+				flex: 0 1 auto;
+				max-width: none;
+				width: 100%;
+			}
+		}
+
+		select {
+			flex-shrink: 0;
+		}
+
+		& > label {
+			flex: 1 1 auto;
+		}
+
+	}
 }
 
 // Shamelessly swiped from https://github.com/Automattic/wp-calypso/blob/59bdfeeb97eda4266ad39410cb0a074d2c88dbc8/client/components/forms/form-toggle