From 553325ed09c134e3c987c16ff7de4cbf622ec0fb Mon Sep 17 00:00:00 2001
From: Bryce Willey <Bryce.Steven.Willey@gmail.com>
Date: Fri, 12 Aug 2022 12:59:34 -0400
Subject: [PATCH] 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.
---
 frontend/pages/register/register.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/pages/register/register.vue b/frontend/pages/register/register.vue
index 339dee652fc6..016ade571a61 100644
--- a/frontend/pages/register/register.vue
+++ b/frontend/pages/register/register.vue
@@ -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"