Usability fixes for new room header (#11729)

* Usability fixes for new room header

* lintfix

* Apply padding to both heading and topic

* lintfix

* comment clarity

* Remove title attr

res/css/views/rooms/_RoomHeader.pcss

@@ -19,11 +19,29 @@ limitations under the License.
     padding: 0 var(--cpd-space-3x);
     border-bottom: 1px solid $separator;
     background-color: $background;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.mx_RoomHeader:hover {
+    background-color: $header-panel-bg-hover;
 }
 
 .mx_RoomHeader_info {
-    cursor: pointer;
     flex: 1;
+    /* We want the spacing to be 64px, 13x = 52px but we have a flex gap of
+       12px set on the flex container, which sums up to 64 */
+    padding-right: var(--cpd-space-13x);
+}
+
+.mx_RoomHeader_truncated {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    overflow: hidden;
+    word-break: break-all;
+    text-overflow: ellipsis;
 }
 
 .mx_RoomHeader_heading {
@@ -35,14 +53,6 @@ limitations under the License.
 .mx_RoomHeader_topic {
     height: 0;
     opacity: 0;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
-    overflow: hidden;
-    word-break: break-all;
-    text-overflow: ellipsis;
-
     transition: all var(--transition-standard) ease 0.1s;
 }
 
@@ -51,10 +61,19 @@ limitations under the License.
         value in pixels */
     height: calc($font-13px * 1.5);
     opacity: 1;
+
+    a:hover {
+        text-decoration: underline;
+    }
+}
+
+.mx_RoomHeader_icon {
+    flex-shrink: 0;
 }
 
 .mx_RoomHeader .mx_FacePile {
     color: $secondary-content;
+    background: $background;
     display: flex;
     align-items: center;
     gap: var(--cpd-space-2x);