From a1c512a96b72f537a7460a7027db88942a5c7f47 Mon Sep 17 00:00:00 2001
From: morethanwords <thanwords24@gmail.com>
Date: Sat, 31 Oct 2020 18:09:19 +0200
Subject: [PATCH] Fix visibility icon on password page Fix popup buttons and
 description overflow

---
 src/index.hbs                          | 2 +-
 src/pages/pagePassword.ts              | 2 +-
 src/scss/partials/pages/_password.scss | 8 ++++++++
 src/scss/partials/popups/_peer.scss    | 3 +++
 src/scss/partials/popups/_popup.scss   | 3 +++
 5 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/index.hbs b/src/index.hbs
index 7b4fae66..3c9dad69 100644
--- a/src/index.hbs
+++ b/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>
diff --git a/src/pages/pagePassword.ts b/src/pages/pagePassword.ts
index 02fdb9ac..4ba9d742 100644
--- a/src/pages/pagePassword.ts
+++ b/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);
diff --git a/src/scss/partials/pages/_password.scss b/src/scss/partials/pages/_password.scss
index a2992b34..f376f857 100644
--- a/src/scss/partials/pages/_password.scss
+++ b/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;
diff --git a/src/scss/partials/popups/_peer.scss b/src/scss/partials/popups/_peer.scss
index 8d922c72..a047cdc4 100644
--- a/src/scss/partials/popups/_peer.scss
+++ b/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 {
diff --git a/src/scss/partials/popups/_popup.scss b/src/scss/partials/popups/_popup.scss
index d050c3a3..6f1a7580 100644
--- a/src/scss/partials/popups/_popup.scss
+++ b/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);