small fixes

src/clients/add/CapabilityConfig.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { Controller, useFormContext } from "react-hook-form";
 import {
   FormGroup,
   Switch,
@@ -8,11 +9,13 @@ import {
   GridItem,
   InputGroup,
 } from "@patternfly/react-core";
-import { Controller, useFormContext } from "react-hook-form";
+
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { ClientForm } from "../ClientDetails";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 
+import "./capability-config.css";
+
 type CapabilityConfigProps = {
   unWrap?: boolean;
   protocol?: string;
@@ -29,7 +32,12 @@ export const CapabilityConfig = ({
   const authorization = watch("authorizationServicesEnabled");
 
   return (
-    <FormAccess isHorizontal role="manage-clients" unWrap={unWrap}>
+    <FormAccess
+      isHorizontal
+      role="manage-clients"
+      unWrap={unWrap}
+      className="keycloak__capability-config__form"
+    >
       <>
         {protocol === "openid-connect" && (
           <>
@@ -57,7 +65,13 @@ export const CapabilityConfig = ({
                     label={t("common:on")}
                     labelOff={t("common:off")}
                     isChecked={!value}
-                    onChange={(value) => onChange(!value)}
+                    onChange={(value) => {
+                      onChange(!value);
+                      if (!value) {
+                        setValue("authorizationServicesEnabled", false);
+                        setValue("serviceAccountsEnabled", false);
+                      }
+                    }}
                   />
                 )}
               />
@@ -103,7 +117,7 @@ export const CapabilityConfig = ({
               fieldId="kc-flow"
             >
               <Grid>
-                <GridItem lg={3} sm={6}>
+                <GridItem lg={4} sm={6}>
                   <Controller
                     name="standardFlowEnabled"
                     defaultValue={true}
@@ -127,7 +141,7 @@ export const CapabilityConfig = ({
                     )}
                   />
                 </GridItem>
-                <GridItem lg={9} sm={6}>
+                <GridItem lg={8} sm={6}>
                   <Controller
                     name="directAccessGrantsEnabled"
                     defaultValue={true}
@@ -151,7 +165,7 @@ export const CapabilityConfig = ({
                     )}
                   />
                 </GridItem>
-                <GridItem lg={3} sm={6}>
+                <GridItem lg={4} sm={6}>
                   <Controller
                     name="implicitFlowEnabled"
                     defaultValue={false}
@@ -175,7 +189,7 @@ export const CapabilityConfig = ({
                     )}
                   />
                 </GridItem>
-                <GridItem lg={9} sm={6}>
+                <GridItem lg={8} sm={6}>
                   <Controller
                     name="serviceAccountsEnabled"
                     defaultValue={false}

src/clients/add/capability-config.css

@@ -0,0 +1,5 @@
+@media (min-width: 768px) {
+  .keycloak__capability-config__form .pf-c-form__group {
+    --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 10rem;
+  }
+}

src/clients/messages.json

@@ -104,7 +104,7 @@
     "authenticationFlow": "Authentication flow",
     "standardFlow": "Standard flow",
     "directAccess": "Direct access grants",
-    "serviceAccount": "Service account",
+    "serviceAccount": "Service accounts",
     "enableServiceAccount": "Enable service account roles",
     "assignRolesTo": "Assign roles to {{client}} account",
     "searchByRoleName": "Search by role name",