From 7592621d77e70e660a1a6a7925332ba0bf9d847d Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Wed, 18 Nov 2020 10:06:56 -0500
Subject: [PATCH] 223-fix-user-fed-card-wrapping (#226)

---
 src/components/keycloak-card/KeycloakCard.tsx | 21 +++++++++++--------
 .../keycloak-card/keycloak-card.css           |  6 +++---
 src/user-federation/UserFederationSection.tsx |  5 ++++-
 src/user-federation/user-federation.css       |  8 +++++--
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/keycloak-card/KeycloakCard.tsx b/src/components/keycloak-card/KeycloakCard.tsx
index c626ec706f..08f0fafd13 100644
--- a/src/components/keycloak-card/KeycloakCard.tsx
+++ b/src/components/keycloak-card/KeycloakCard.tsx
@@ -9,6 +9,8 @@ import {
   Dropdown,
   KebabToggle,
   Label,
+  Flex,
+  FlexItem,
 } from "@patternfly/react-core";
 import "./keycloak-card.css";
 
@@ -53,15 +55,16 @@ export const KeycloakCard = ({
       </CardHeader>
       <CardBody />
       <CardFooter>
-        {footerText && footerText}
-        {labelText && (
-          <Label
-            color={labelColor || "gray"}
-            className="keycloak__keycloak-card__footer-label"
-          >
-            {labelText}
-          </Label>
-        )}
+        <Flex>
+          <FlexItem className="keycloak--keycloak-card__footer">
+            {footerText && footerText}
+          </FlexItem>
+          <FlexItem>
+            {labelText && (
+              <Label color={labelColor || "gray"}>{labelText}</Label>
+            )}
+          </FlexItem>
+        </Flex>
       </CardFooter>
     </Card>
   );
diff --git a/src/components/keycloak-card/keycloak-card.css b/src/components/keycloak-card/keycloak-card.css
index 5777ebed26..550a27a8a1 100644
--- a/src/components/keycloak-card/keycloak-card.css
+++ b/src/components/keycloak-card/keycloak-card.css
@@ -1,3 +1,3 @@
-  .keycloak__keycloak-card__footer-label {
-    margin-left: var(--pf-global--spacer--lg);
-  }
+.keycloak-admin--keycloak-card__footer-text {
+  --pf-l-flex--spacer: var(--pf-l-flex--spacer--lg);
+}
diff --git a/src/user-federation/UserFederationSection.tsx b/src/user-federation/UserFederationSection.tsx
index 02e6c3531e..f2f456a450 100644
--- a/src/user-federation/UserFederationSection.tsx
+++ b/src/user-federation/UserFederationSection.tsx
@@ -100,7 +100,10 @@ export const UserFederationSection = () => {
         </DropdownItem>,
       ];
       return (
-        <GalleryItem key={index}>
+        <GalleryItem
+          key={index}
+          className="keycloak-admin--user-federation__gallery-item"
+        >
           <KeycloakCard
             id={userFederation.id!}
             dropdownItems={ufCardDropdownItems}
diff --git a/src/user-federation/user-federation.css b/src/user-federation/user-federation.css
index 6ebacd20c7..449b6cf233 100644
--- a/src/user-federation/user-federation.css
+++ b/src/user-federation/user-federation.css
@@ -1,3 +1,7 @@
 .keycloak__user-federation__dropdown {
-    margin-top: var(--pf-global--spacer--lg);
-  }
+  margin-top: var(--pf-global--spacer--lg);
+}
+
+.keycloak-admin--user-federation__gallery-item {
+  display: contents;
+}