fix: update tooltip size for smaller screens (#608)

src/_style.scss

@@ -312,13 +312,16 @@ select.form-control {
 }
 
 #password-requirement-top {
+  @extend .x-small;
+  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
   opacity: 1;
   width: 90%;
   margin-bottom: 10px;
-  @extend .x-small;
-  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
+  display: flex;
+  justify-content: center;
+
   .tooltip-inner {
-    max-width: inherit;
+    min-width: 464px !important;
     background: white;
     display: block;
     color: #707070;
@@ -778,6 +781,14 @@ select.form-control {
     padding: 1.5rem !important;
   }
 
+  #password-requirement-top {
+    display: unset;
+    .tooltip-inner {
+      max-width: inherit;
+      min-width: unset !important;
+    }
+  }
+
   .progressive-profiling-support {
     font-size: 0.688rem;
     font-weight: normal;