Tweaked the tooltip to be better aligned. Also added the fading of the room name if too long

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

@@ -35,10 +35,12 @@ limitations under the License.
 
 .mx_RoomTile_name {
     display: inline-block;
+    position: relative;
     width: 100px;
     vertical-align: middle;
     overflow: hidden;
-    word-break: break-word;
+    /* word-break: break-word; */
+    white-space: nowrap;
     padding-left: 5px;
     padding-right: 15px;
     padding-top: 2px;
@@ -46,6 +48,17 @@ limitations under the License.
     color: rgba(69, 69, 69, 0.8);
 }
 
+.mx_RoomTile_name:before {
+    content:'';
+    width:100px;
+    height:22px;
+    top: 0px;
+    left: 0px;
+    position:absolute;
+    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;
     color: #454545;

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

@@ -63,6 +63,7 @@ limitations under the License.
     margin-right: 18px;
     -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
+    z-index: 1;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu_options {

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

@@ -27,6 +27,6 @@ limitations under the License.
     border-radius: 8px;
     background-color: #fff;
     z-index: 2000;
-    left: 64px;
+    left: 52px;
     padding: 6px;
 }