Fix #996 - Stop alias name from flickering

mozilla · Aug 18, 2021 · 5b9ab93 · 5b9ab93
1 parent 43fd119
commit 5b9ab93
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 38 deletions.
diff --git a/static/scss/partials/dashboard.scss b/static/scss/partials/dashboard.scss
@@ -204,12 +204,14 @@
 
 .c-alias-name {
     margin-left: $spacing-xs;
-    max-width: $content-sm;
     height: 100%;
     flex-wrap: nowrap;
 
-    .additional-notes, .relay-address {
+    .additional-notes {
         text-overflow: ellipsis;
+        flex-direction: row;
+        position: relative;
+        margin: auto auto 0 0;
     }
 
     .relay-address {
@@ -225,9 +227,35 @@
     }
 
     input {
+        color: $color-grey-50;
+        display: flex;
+        font-weight: 500;
+        align-items: center;
+        background: transparent;
+        font-size: 1em;
+        padding: 6px $spacing-lg 6px 6px;
+        width: $content-xs;
         text-overflow: ellipsis;
-        width: inherit;
-        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        transition: all .2s ease;
+        // Reset styles from protocol
+        background-color: none;
+        border-radius: 0;
+        border: 0;
+        margin: 0;
+        list-style: inherit;
+    }
+
+    input[type="text"] {
+        max-width: $content-xs;
+        min-width: auto;
+    }
+
+    @media screen and (max-width: $screen-sm) {
+        input {
+            width: auto;
+        }
     }
 
     @media #{$mq-md} {

diff --git a/static/scss/partials/main.scss b/static/scss/partials/main.scss
@@ -723,38 +723,6 @@ table {
     color: $color-grey-50;
 }
 
-input.relay-email-address-label {
-    color: $color-grey-50;
-    display: flex;
-    font-weight: 500;
-    align-items: center;
-    background: transparent;
-    font-size: 1em;
-    padding: 6px 24px 6px 6px;
-    width: 188px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    transition: all .2s ease;
-    // Reset styles from protocol
-    background-color: none;
-    border-radius: 0;
-    border: 0;
-    margin: 0;
-    list-style: inherit;
-    min-width: 0;
-}
-
-.additional-notes {
-    flex-direction: row;
-    position: relative;
-    visibility: hidden;
-    pointer-events: none;
-    margin: auto auto 0 0;
-    display: none;
-    width: 100%;
-}
-
 .legacy-addon-show-label {
     visibility: visible;
 }
@@ -812,8 +780,7 @@ input:focus::placeholder {
 }
 
 .relay-email-address-label:hover {
-    background: $color-grey-20;
-    width: 192px;
+    background: $color-grey-10;
     transition: all .1s ease-in-out;
 }