From 214b9b74c43f98a0494666caabb1dec2bc363de5 Mon Sep 17 00:00:00 2001
From: Robin Appelman <robin@icewind.nl>
Date: Thu, 1 Dec 2016 14:17:47 +0100
Subject: [PATCH 1/2] dont grow items in the app list

Signed-off-by: Robin Appelman <robin@icewind.nl>
---
 settings/css/settings.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 23d6cd9800..1c1e278781 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -538,7 +538,7 @@ span.version {
 }
 #apps-list .section {
 	position: relative;
-	flex: 1 0 330px;
+	flex: 0 0 330px;
 	margin: 0;
 	padding-right: 50px;
 }

From f82a40d478a54389f286b1fbf36d5e5f40618388 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Fri, 2 Dec 2016 20:28:57 +0100
Subject: [PATCH 2/2] use flex and specify rows to align everything
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 settings/css/settings.css | 45 +++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 1c1e278781..1cdfcc7751 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -231,7 +231,7 @@ table.nostyle td { padding: 0.2em 0; }
 	text-align: right;
 }
 #sessions .token-list td > a.icon,
-#apppasswords .token-list  td > a.icon {
+#apppasswords .token-list td > a.icon {
 	opacity: 0;
 	transition: opacity 0.5s;
 }
@@ -538,13 +538,50 @@ span.version {
 }
 #apps-list .section {
 	position: relative;
-	flex: 0 0 330px;
-	margin: 0;
-	padding-right: 50px;
+	flex: 0 0 auto;
+	margin-left: 20px;
 }
 #apps-list .section.apps-experimental {
 	flex-basis: 90%;
 }
+
+@media (min-width: 1601px) {
+	#apps-list .section {
+		width: 22%;
+		box-sizing: border-box;
+	}
+	#apps-list .section:nth-child(4n) {
+		margin-right: 20px;
+	}
+}
+
+@media (min-width: 1201px) and (max-width: 1600px) {
+	#apps-list .section {
+		width: 30%;
+		box-sizing: border-box;
+	}
+	#apps-list .section:nth-child(3n) {
+		margin-right: 20px;
+	}
+}
+
+@media (min-width: 901px) and (max-width: 1200px), (min-width: 601px) and (max-width: 770px) {
+	#apps-list .section {
+		width: 40%;
+		box-sizing: border-box;
+	}
+	#apps-list .section:nth-child(2n) {
+		margin-right: 20px;
+	}
+}
+
+@media (max-width: 600px), (min-width: 771px) and (max-width: 900px) {
+	#apps-list .section {
+		width: 100%;
+		box-sizing: border-box;
+	}
+}
+
 .section h2.app-name {
 	margin-bottom: 8px;
 	display: inline;