AppContent: add two column layout for larger screens

aragon · Apr 26, 2019 · 7739e40 · 7739e40
1 parent a877de9
commit 7739e40
Showing 1 changed file with 5 additions and 1 deletion.
diff --git 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;