From 392a29328619d9712bf8fd933a9f13b7a3f35442 Mon Sep 17 00:00:00 2001
From: Roeland Jago Douma <roeland@famdouma.nl>
Date: Sat, 10 Sep 2016 14:10:11 +0200
Subject: [PATCH 1/2] Use flexbox on app page

---
 settings/css/settings.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index d66b0f82b5..7bd71e5df1 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -383,9 +383,12 @@ span.version {
 #apps-list {
 	position: relative;
 	height: 100%;
+	display: flex;
+	flex-flow: row wrap;
 }
 .section {
 	position: relative;
+	width: 300px;
 }
 .section h2.app-name {
 	margin-bottom: 8px;

From e169bb06363a81054aa8ecba59bad88e734501c9 Mon Sep 17 00:00:00 2001
From: Felix Epp <work@felixepp.de>
Date: Sat, 10 Sep 2016 17:01:24 +0200
Subject: [PATCH 2/2] Limit to apps list, add proper flex attributes

Let app-name headline break, increase padding on the right for more visual clearance.
Make experimental header full width

Signed-off-by: Felix A. Epp <work@felixepp.de>
---
 settings/css/settings.css | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 7bd71e5df1..fa8c20a70d 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -384,14 +384,21 @@ span.version {
 	position: relative;
 	height: 100%;
 	display: flex;
-	flex-flow: row wrap;
+	flex-wrap: wrap;
+	align-content: flex-start;
 }
-.section {
+#apps-list .section {
 	position: relative;
-	width: 300px;
+	flex: 1 0 330px;
+	margin: 0;
+	padding-right: 50px;
+}
+#apps-list .section.apps-experimental {
+	flex-basis: 90%;
 }
 .section h2.app-name {
 	margin-bottom: 8px;
+	display: inline;
 }
 .followupsection {
 	display: block;