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);

res/themes/dark/css/_dark.pcss

@@ -54,6 +54,7 @@ $accent-1400: var(--cpd-color-green-1400);
 /* ******************** */
 $inverted-bg-color: var(--cpd-color-bg-action-primary-rest);
 $header-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
+$header-panel-bg-hover: var(--cpd-color-gray-200);
 /* ******************** */
 
 /* Theme specific colors */

res/themes/legacy-dark/css/_legacy-dark.pcss

@@ -8,6 +8,7 @@ $bg-color: #181b21;
 $base-color: #15171b;
 $base-text-color: #edf3ff;
 $header-panel-bg-color: #22262e;
+$header-panel-bg-hover: var(--cpd-color-gray-200);
 $header-panel-text-primary-color: #a1b2d1;
 $header-panel-text-secondary-color: #c8c8cd;
 $text-primary-color: #edf3ff;

res/themes/legacy-light/css/_legacy-light.pcss

@@ -16,6 +16,7 @@ $monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI
 /* unified palette */
 /* try to use these colors when possible */
 $header-panel-bg-color: #f3f8fd;
+$header-panel-bg-hover: var(--cpd-color-gray-200);
 
 /* typical text (dark-on-white in light skin) */
 $primary-fg-color: #2e2f32;

res/themes/light-custom/css/_custom.pcss

@@ -57,6 +57,7 @@ $dialog-backdrop-color: var(--sidebar-color-50pct);
 
 /* --roomlist-background-color */
 $header-panel-bg-color: var(--roomlist-background-color);
+$header-panel-bg-hover: var(--cpd-color-gray-200);
 $panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color);
 /* these were #f2f5f8 instead of #f3f8fd, but close enough */
 $dark-panel-bg-color: var(--roomlist-background-color);

res/themes/light/css/_light.pcss

@@ -75,6 +75,7 @@ $accent-1400: var(--cpd-color-green-1400);
 /* ******************** */
 $inverted-bg-color: var(--cpd-color-bg-action-primary-rest);
 $header-panel-bg-color: var(--cpd-color-bg-subtle-primary);
+$header-panel-bg-hover: var(--cpd-color-gray-200);
 /* ******************** */
 
 /* Theme specific colors */