Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-09 03:04:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/pages/register/register.vue
View File

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