From fec5fd1ae71e93fbd907af8ff94fce2bd9778eb0 Mon Sep 17 00:00:00 2001
From: Katerina Koukiou <kkoukiou@redhat.com>
Date: Mon, 8 Nov 2021 13:41:18 +0100
Subject: [PATCH] Use Flex layout for spacing the two config cards in the
 config page

---
 src/app.scss   |  8 ++++++++
 src/config.jsx | 11 +++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 9bb3a1c..dac3275 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -6,3 +6,11 @@ p {
 .ct-page-fill {
   height: 100% !important;
 }
+
+.config-container {
+    row-gap: var(--pf-global--spacer--sm);
+
+    > .pf-c-card {
+        min-width: 30rem;
+    }
+}
diff --git a/src/config.jsx b/src/config.jsx
index 2c97ea4..5b1e1df 100644
--- a/src/config.jsx
+++ b/src/config.jsx
@@ -22,6 +22,7 @@ import React from "react";
 import {
     Breadcrumb, BreadcrumbItem,
     Button,
+    Flex,
     Form,
     FormGroup,
     FormSelect,
@@ -384,7 +385,7 @@ class GeneralConfig extends React.Component {
         return (
             <Card>
                 <CardTitle>General Config</CardTitle>
-                <CardBody style={{ maxWidth: "500px" }}>{form}</CardBody>
+                <CardBody>{form}</CardBody>
             </Card>
         );
     }
@@ -547,7 +548,7 @@ class SssdConfig extends React.Component {
         return (
             <Card>
                 <CardTitle>SSSD Config</CardTitle>
-                <CardBody style={{ maxWidth: "500px" }}>{form}</CardBody>
+                <CardBody>{form}</CardBody>
             </Card>
         );
     }
@@ -573,8 +574,10 @@ groupProps={{ sticky: 'top' }}
                   </Breadcrumb>
               }>
             <PageSection>
-                <GeneralConfig />
-                <SssdConfig />
+                <Flex className="config-container">
+                    <GeneralConfig />
+                    <SssdConfig />
+                </Flex>
             </PageSection>
         </Page>
     );