From 7bfc4779580feca95021e8db8f611b436251e349 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 | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/apps/AppCenter/InstalledApps/AppContent.js b/src/apps/AppCenter/InstalledApps/AppContent.js
index ac3f2fc6f..a9c0322db 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>
@@ -220,9 +222,11 @@ const Markdown = styled.section`
   margin-top: ${1 * GU}px;
   padding-right: ${1 * GU}px;
   h2,
-  h3 {
+  h3,
+  h4 {
     font-weight: bold;
     margin: ${1 * GU}px 0;
+    break-after: avoid;
   }
   p {
     margin: ${1 * GU}px 0;