223-fix-user-fed-card-wrapping (#226)

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}
+        <Flex>
-        {labelText && (
+          <FlexItem className="keycloak--keycloak-card__footer">
-          <Label
+            {footerText && footerText}
-            color={labelColor || "gray"}
+          </FlexItem>
-            className="keycloak__keycloak-card__footer-label"
+          <FlexItem>
-          >
+            {labelText && (
-            {labelText}
+              <Label color={labelColor || "gray"}>{labelText}</Label>
-          </Label>
+            )}
-        )}
+          </FlexItem>
+        </Flex>
       </CardFooter>
     </Card>
   );

src/components/keycloak-card/keycloak-card.css

@@ -1,3 +1,3 @@
-  .keycloak__keycloak-card__footer-label {
+.keycloak-admin--keycloak-card__footer-text {
-    margin-left: var(--pf-global--spacer--lg);
+  --pf-l-flex--spacer: var(--pf-l-flex--spacer--lg);
-  }
+}

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}

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;
+}