lib: Change width of password progress

cockpit-project · Oct 31, 2023 · 6a9640c · 6a9640c
1 parent 5657c87
commit 6a9640c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/pkg/lib/cockpit-components-password.jsx b/pkg/lib/cockpit-components-password.jsx
@@ -96,6 +96,8 @@ export const PasswordFormFields = ({
     else
         variant = "danger";
 
+    let passwordStrengthValue = Number.isInteger(passwordStrength) ? passwordStrength : 0;
+
     return (
         <>
             <FormGroup label={password_label}
@@ -127,12 +129,12 @@ export const PasswordFormFields = ({
                 </InputGroup>
                 <div>
                     <Progress id={idPrefix + "-meter"}
-                              className={"ct-password-strength-meter " + variant}
-                              title={_("password quality")}
-                              size={ProgressSize.sm}
-                              measureLocation={ProgressMeasureLocation.none}
-                              variant={variant}
-                              value={Number.isInteger(passwordStrength) ? passwordStrength : 0} />
+                        className={"ct-password-strength-meter " + variant}
+                        title={_("password quality")}
+                        size={ProgressSize.sm}
+                        measureLocation={ProgressMeasureLocation.none}
+                        variant={variant}
+                        value={passwordStrengthValue} />
                     <div id={idPrefix + "-password-meter-message"} className="pf-v5-c-form__helper-text" aria-live="polite">{passwordMessage}</div>
                 </div>
                 {error_password && <FormHelperText>

diff --git a/pkg/lib/cockpit-components-password.scss b/pkg/lib/cockpit-components-password.scss
@@ -1,5 +1,6 @@
 .ct-password-strength-meter {
   grid-gap: var(--pf-v5-global--spacer--xs);
+  inline-size: var(--pf-v5-global--spacer--2xl);
 
   .pf-v5-c-progress__description, .pf-v5-c-progress__status {
     display: none;