Fix visibility icon on password page

Fix popup buttons and description overflow

src/index.hbs

@@ -95,7 +95,7 @@
               <div class="input-field">
                 <input type="password" name="password" id="password" autocomplete="off" required />
                 <label for="password">Password</label>
-                <span class="toggle-visible tgico-eye1"></span>
+                <span class="toggle-visible tgico"></span>
               </div>
               <button class="btn-primary rp">NEXT</button>
             </div>

src/pages/pagePassword.ts

@@ -57,7 +57,7 @@ let onFirstMount = (): Promise<any> => {
     cancelEvent(e);
     passwordVisible = !passwordVisible;
 
-    this.classList.toggle('tgico-eye2', passwordVisible);
+    this.classList.toggle('eye-hidden', passwordVisible);
     if(passwordVisible) {
       passwordInput.setAttribute('type', 'text');
       animation.setDirection(1);

src/scss/partials/pages/_password.scss

@@ -29,6 +29,14 @@
     cursor: pointer;
     transition: .2s;
     padding: .5rem;
+
+    &:before {
+      content: $tgico-eye1;
+    }
+
+    &.eye-hidden:before {
+      content: $tgico-eye2;
+    }
     
     html.no-touch &:hover {
       color: #000;

src/scss/partials/popups/_peer.scss

@@ -27,6 +27,9 @@
       margin-bottom: 1.625rem;
       min-width: 15rem;
       max-width: fit-content;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: break-word;
     }
 
     &-buttons {

src/scss/partials/popups/_popup.scss

@@ -100,6 +100,9 @@
       color: $color-blue;
       position: relative;
       overflow: hidden;
+      max-width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
 			
 			html.no-touch &:hover {
 				background-color: var(--color-gray-hover);