Nice, but we don't need javascript to do width restriction here, css is invented just for that:

joomla-field-password > .progress {
	max-width: 277px;
}

I don't know where all this script would be used, as this can be used to generate a password strength bar on any page. The width of form fields might vary and might occupy more space than 277px. That's why I used js to resize the bar, according to the corresponding form field

Markup:

<joomla-field-password>
    <div class="password-input-wrapper">
        <input type="password" class="form-control">
        <div class="progress"></div>
    </div>
</joomla-field-password>

SCSS:

$input-max-width: 240px;

.password-input-wrapper {
   max-width: $input-max-width;
}

Progress bar will be 100% width as it's a block element and contained within the wrapper.

No need for JS on this at all

If we can change the markup and style of elements other than the progress bar, then the issue can be solved just by appending the following in passwordstrength.js

fields[i].parentElement.parentElement.style.width = 'fit-content';

The solution works. Should I make a pull request?

Nothing needs to be appended. It simply needs a wapper as shown above. There's already a pending PR for this so any changes should be made there

Joomla's code already makes up a wrapper with class password-group. I'm just asking if we could style that with width: fit-content, because it does the issue.

Joomla's code already makes up a wrapper with class password-group. I'm just asking if we could style that with width: fit-content, because it does the issue.

The code you're looking at is deprecated!
Please follow our suggestions and use #19231 as your base...

Set to "closed" on behalf of @Quy by The JTracker Application at issues.joomla.org/joomla-cms/19963