fix: use flex-basis, not width to fix min size bug (#1548)

On mobile screens when following a registration invite link, the page
would be too wide to interact with, extending well over the sides of the
phone.

This is because the minimum size of content is set to `auto` (by
default), and accord to the spec (https://www.w3.org/TR/css-flexbox-1/#specified-size-suggestion)
the minimum size of the element is the mimimum size of it's content. The
password strength element in the panel had a width of 500px, making the
entire component overflow the screen.

Changing the width to `flex-basis` instead, allows for the password
strength element to shrink if it overflows the screen.
This commit is contained in:
Bryce Willey 2022-08-12 12:59:34 -04:00 committed by GitHub
parent ff2334a489
commit 553325ed09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -173,7 +173,7 @@
@click:append="pwFields.togglePasswordShow"
/>
<div class="d-flex justify-center pb-6 mt-n1">
<div style="width: 500px">
<div style="flex-basis: 500px">
<strong> {{ $t("user.password-strength", { strength: pwStrength.strength.value }) }}</strong>
<v-progress-linear
:value="pwStrength.score.value"