Bug 1077513 - Stop Loop's contacts display squashing the avatar when a contact has a long name. r=Mardak
authorMark Banner <standard8@mozilla.com>
Thu, 10 Sep 2015 12:01:16 +0100
changeset 294208 9d30e8decf0ee20e8deb0f5a60b5a3eef3d15614
parent 294207 275ecc1d1a397b3e3a99724dbff7ac91be23de7f
child 294209 e142ec232fe1ea5a26815ba2e60c8d79e8672e09
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMardak
bugs1077513
milestone43.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1077513 - Stop Loop's contacts display squashing the avatar when a contact has a long name. r=Mardak
browser/components/loop/content/css/contacts.css
--- a/browser/components/loop/content/css/contacts.css
+++ b/browser/components/loop/content/css/contacts.css
@@ -160,39 +160,33 @@ html[dir="rtl"] .contact-filter {
   display: block;
   z-index: 1;
 }
 
 .contact > .details {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-
-.contact:hover > .details {
-  /* Hovering the contact shows the icons/ buttons, which takes up horizontal
-   * space. This causes the fixed-size avatar to resize horizontally, so we assign
-   * a flex value equivalent to the maximum pixel value to avoid the resizing
-   * to happen. Consider this a hack. */
-  flex: 190;
+  flex: auto;
 }
 
 .contact > .avatar {
   width: 40px;
   height: 40px;
   background-color: #ccc;
   border-radius: 50%;
   -moz-margin-end: 10px;
   overflow: hidden;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
   background-image: url("../shared/img/audio-call-avatar.svg");
   background-repeat: no-repeat;
   background-color: #4ba6e7;
   background-size: contain;
   -moz-user-select: none;
+  flex: none;
 }
 
 /*
  * Loop through all 12 default avatars.
  */
 .contact:nth-child(12n + 1) > .avatar.defaultAvatar {
   background-image: url("../shared/img/avatars.svg#blue-avatar");
   background-color: #4A90E2;
@@ -300,19 +294,20 @@ html[dir="rtl"] .contact-filter {
   color: #4a4a4a;
   font-size: 11px;
   line-height: 14px;
 }
 
 .icons {
   cursor: pointer;
   display: none;
-  -moz-margin-start: auto;
+  -moz-margin-start: 10px;
   color: #fff;
   -moz-user-select: none;
+  flex: none;
 }
 
 .icons:hover {
   display: block;
 }
 
 .icons i {
   display: inline-block;