removed global css (#1724)

fixes: #1723

src/user/UserCredentials.tsx

@@ -482,7 +482,11 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
             </Button>,
           ]}
         >
-          <Form id="userCredentials-form" isHorizontal>
+          <Form
+            id="userCredentials-form"
+            isHorizontal
+            className="keycloak__user-credentials__reset-form"
+          >
             <FormGroup
               name="password"
               label={t("password")}
@@ -495,13 +499,11 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
               }
               isRequired
             >
-              <div className="kc-password">
               <PasswordInput
                 name="password"
                 aria-label="password"
                 ref={register({ required: true })}
               />
-              </div>
             </FormGroup>
             <FormGroup
               name="passwordConfirmation"
@@ -519,13 +521,11 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
               }
               isRequired
             >
-              <div className="kc-passwordConfirmation">
               <PasswordInput
                 name="passwordConfirmation"
                 aria-label="passwordConfirm"
                 ref={register({ required: true })}
               />
-              </div>
             </FormGroup>
             <FormGroup
               label={t("common:temporaryPassword")}
@@ -550,7 +550,7 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
                     labelOff={t("common:off")}
                   />
                 )}
-              ></Controller>
+              />
             </FormGroup>
           </Form>
         </Modal>

src/user/user-section.css

@@ -123,18 +123,8 @@ article.pf-c-card.pf-m-flat.kc-available-idps > div > div > h1 {
   margin: 6px 0 10px 35px;
 }
 
-.kc-password, .kc-passwordConfirmation {
-  width: 355px;
-  float: right;
-}
-
-.pf-c-form__group-label {
-  width: max-content;
-}
-
-.pf-m-error {
-  display: inline-block;
-  margin-left: var(--pf-global--spacer--xl);
+.keycloak__user-credentials__reset-form {
+  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 13rem;
 }
 
 .kc-edit-icon {