From 7739e403c4d3b0f15253917717962aa4ee8119a9 Mon Sep 17 00:00:00 2001
From: Gorka <gorka@aquigorka.com>
Date: Fri, 26 Apr 2019 14:39:34 +0200
Subject: [PATCH] AppContent: add two column layout for larger screens

---
 src/apps/AppCenter/InstalledApps/AppContent.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/apps/AppCenter/InstalledApps/AppContent.js b/src/apps/AppCenter/InstalledApps/AppContent.js
index ac3f2fc6f..71670abe1 100644
--- a/src/apps/AppCenter/InstalledApps/AppContent.js
+++ b/src/apps/AppCenter/InstalledApps/AppContent.js
@@ -151,8 +151,9 @@ const AppContent = React.memo(({ repo, repoVersions, onRequestUpgrade }) => {
                 {!!repoDetails && (
                   <React.Fragment>
                     <Heading2>Details</Heading2>
-                    <Markdown>
+                    <Markdown css={above('large') && 'columns: 2;'}>
                       {
+                        /* eslint-disable react/prop-types */
                         remark()
                           .use(remark2react, {
                             remarkReactComponents: {
@@ -164,6 +165,7 @@ const AppContent = React.memo(({ repo, repoVersions, onRequestUpgrade }) => {
                             },
                           })
                           .processSync(repoDetails).contents
+                        /* eslint-enable react/prop-types */
                       }
                     </Markdown>
                   </React.Fragment>
@@ -223,6 +225,8 @@ const Markdown = styled.section`
   h3 {
     font-weight: bold;
     margin: ${1 * GU}px 0;
+    break-after: avoid;
+    break-before: always;
   }
   p {
     margin: ${1 * GU}px 0;