New design for long names

src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css

@@ -94,7 +94,7 @@ limitations under the License.
     background-color: #eaf5f0;
 
     -webkit-flex: 0 0 210px;
-    flex: 0 0 210px;
+    flex: 0 0 235px;
 }
 
 .mx_MatrixChat .mx_LeftPanel.collapsed {

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .mx_RoomTile {
+    position: relative;
     cursor: pointer;
     /* This fixes wrapping of long room names, but breaks drag & drop previews */
     /* display: table-row; */
@@ -26,6 +27,12 @@ limitations under the License.
     opacity: 0.4;
 }
 
+.mx_RoomTile_nameContainer {
+    display: inline-block;
+    width: 170px;
+    height: 36px;
+}
+
 .mx_RoomTile_avatar {
     display: inline-block;
     padding-top: 6px;
@@ -40,18 +47,19 @@ limitations under the License.
 .mx_RoomTile_name {
     display: inline-block;
     position: relative;
-    width: 103px;
+    width: 157px;
     vertical-align: middle;
-    overflow: hidden;
+    padding-left: 6px;
-    /* word-break: break-word; */
+    padding-right: 6px;
-    white-space: nowrap;
-    padding-left: 5px;
-    padding-right: 15px;
     padding-top: 2px;
-    padding-bottom: 2px;
+    padding-bottom: 3px;
     color: rgba(69, 69, 69, 0.8);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
+/*
 .mx_RoomTile_name:before {
     content:'';
     width:103px;
@@ -62,6 +70,7 @@ limitations under the License.
     padding-left: 20px;
     background:linear-gradient(to right, rgba(234,245,240,0) 80%, #eaf5f0 99%);
 }
+*/
 
 .mx_RoomTile_ellipsis .mx_RoomTile_name {
     font-style: italic;
@@ -82,8 +91,7 @@ limitations under the License.
 }
 
 .collapsed .mx_RoomTile_badge {
-    top: -40px;
+    top: -2px;
-    left: 31px;
     min-width: 12px;
     height: 16px;
     border-radius: 16px;
@@ -95,16 +103,17 @@ limitations under the License.
 .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
     background-color: rgba(0,0,0,0);
     opacity: 0;
-    top: -40px;
+    top: -2px;
 }
 
 /* Position menu icon when room muted and collapsed */
-.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
+.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute,
+.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
     display: inline-block;
     background-color: rgb(214, 214, 214);
     letter-spacing: 0.1em;
     opacity: 1;
-    top: -40px;
+    top: -2px;
 }
 
 /* Hide the bottom of speech bubble */
@@ -128,9 +137,9 @@ limitations under the License.
     display: inline-block;
     min-width: 14px;
     height: 17px;
-    position: relative;
+    position: absolute;
-    left: 8px;
+    right: 9px;
-    top: 2px;
+    top: 9px;
     border-radius: 14px;
     color: #fff;
     font-weight: 600;
@@ -141,24 +150,26 @@ limitations under the License.
     padding-right: 4px;
 }
 
-.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge {
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
+.mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge {
     letter-spacing: 0.1em;
     opacity: 1;
 }
 
 /* Position menu icon when room muted */
-.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute, .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute,
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
     background-color: rgb(214, 214, 214);
     letter-spacing: 0.1em;
     opacity: 1;
-    top: 2px;
+    top: 9px;
 }
 
 /* Position mute icon when room muted */
 .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
     background-color: rgba(0,0,0,0);
     opacity: 1;
-    top: 4px;
+    top: 11px;
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@@ -182,6 +193,14 @@ limitations under the License.
     background-color: rgba(118,207,166,0.2);
 }
 
+.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
+    width: 144px;
+}
+
+.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name.mx_RoomTile_badgeShown {
+    width: 136px;
+}
+
 .mx_RoomTile_arrow {
     position: absolute;
     right: 0px;

src/skins/vector/css/vector-web/structures/RoomSubList.css

@@ -25,8 +25,8 @@ limitations under the License.
     color: #3d3b39;
     font-weight: 600;
     font-size: 13px;
-    padding-left: 12px;
+    padding-left: 18px;
-    padding-right: 12px;
+    padding-right: 18px;
     margin-top: 8px;
     margin-bottom: 4px;
     cursor: pointer;

src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css

@@ -16,8 +16,8 @@ limitations under the License.
 
 .mx_RoomDropTarget {
     font-size: 13px;
-    margin-left: 10px;
+    margin-left: 18px;
-    margin-right: 15px;
+    margin-right: 18px;
     padding-top: 5px;
     padding-bottom: 5px;
     border: 1px dashed #76cfa6;
@@ -28,6 +28,7 @@ limitations under the License.
 
 .collapsed .mx_RoomDropTarget {
     margin-right: 10px;
+    margin-left: 10px;
 }
 
 .mx_RoomDropTarget_placeholder {