Fix #917 - Fix flexbox to truncate alias

mozilla · Jul 23, 2021 · c93cdef · c93cdef
1 parent 53fbf2f
commit c93cdef
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/privaterelay/templates/profile.html b/privaterelay/templates/profile.html
@@ -99,8 +99,8 @@
             </div>
             <!--end enable/disable toggle -->
 
-            <div class="c-alias-name xflx xflx-col">
-              <div class="relay-email-row card-top-row xflx xflx-row inset">
+            <div class="c-alias-name">
+              <div class="relay-email-row card-top-row inset">
                 <!-- alias label -->
                 <div class="additional-notes">
                   <input data-label="" type="text" maxlength="50" value="" aria-label="{% ftlmsg 'profile-label-edit' %}" class="relay-email-address-label ff-Met">
@@ -140,7 +140,7 @@
             <button title="Click to copy"
               data-id="{{ relay_address.id }}"
               data-clipboard-text="{{ relay_address.address }}@{{ RELAY_DOMAIN }}"
-              class="relay-address click-copy ff-Met xflx jst-cntr al-cntr">
+              class="relay-address click-copy ff-Met jst-cntr al-cntr">
                 {{ relay_address.address }}@{{ RELAY_DOMAIN }}
                 <span class="alias-copied-icon"></span>
                 <span class="alias-copied-message">{% ftlmsg 'profile-label-copied' %}</span>

diff --git a/static/scss/partials/dashboard.scss b/static/scss/partials/dashboard.scss
@@ -194,6 +194,9 @@
 
 .c-alias-name {
     margin-left: $spacing-xs;
+    width:100%;
+    overflow:hidden;
+    flex-wrap: nowrap;
 
     .relay-address {
         display: none;
@@ -238,6 +241,7 @@
 
 .c-alias-meta {
     display: flex;
+    flex-wrap: nowrap;
     margin-left: auto;
 }
 

diff --git a/static/scss/partials/main.scss b/static/scss/partials/main.scss
@@ -676,7 +676,7 @@ table {
   height: 100%; /* expand clickable area of relay address */
   display: block;
   position: relative;
-  max-width: 100%;
+  max-width:100%;
   text-overflow: ellipsis;
   overflow: hidden;
   border-radius: 0;