Fix buttons on the room header being compressed due to long room name

[luixxiul]

This PR adds the flex declaration to mx_RoomHeader_button to prevent the buttons from being compressed due to a long room name, copying the whole declarations from mx_RightPanel_headerButton for reference.

Before:

After:

Note mx_RightPanel_headerButton should be merged with mx_RoomHeader_button eventually (see the fixme comment on _RightPanel.pcss).

type: defect

Signed-off-by: Suguru Hirahara luixxiul@users.noreply.github.com

Checklist

• Tests written for new code (and old code if feasible)
• Linter and other CI checks pass
• Sign-off given on the changes (see CONTRIBUTING.md)

---

Here's what your changelog entry will look like:

🐛 Bug Fixes

• Fix buttons on the room header being compressed due to long room name (#10155). Contributed by @luixxiul.

[richvdh]

@luixxiul thanks for the contribution!

Rather than copying all the CSS definitions between mx_RightPanel_headerButton and mx_RoomHeader_button, maybe we should just have a single class mx_HeaderButton which is used in both places? What do you think?

[luixxiul]

That seems to work, let me check whether it would not be against naming rules...

[luixxiul]

It seems that creating mx_HeaderButton is likely to require refactoring of the block below (which might not be limited to it, as current CSS selector names do not tell us the structure of the elements):

matrix-react-sdk/res/css/structures/_RightPanel.pcss

Lines 41 to 202 in eb27189

	/** Fixme - factor this out with the main header **/
	.mx_RightPanel_headerButtonGroup {
	height: 100%;
	display: flex;
	background-color: $background;
	padding: 0 9px;
	align-items: center;
	}
	/* See: mx_RoomHeader_button */
	.mx_RightPanel_headerButton {
	cursor: pointer;
	flex: 0 0 auto;
	margin-left: 1px;
	margin-right: 1px;
	height: 32px;
	width: 32px;
	position: relative;
	border-radius: 100%;
	&::before {
	content: "";
	position: absolute;
	top: 4px; /* center with parent of 32px */
	left: 4px; /* center with parent of 32px */
	height: 24px;
	width: 24px;
	background-color: $icon-button-color;
	mask-repeat: no-repeat;
	mask-size: contain;
	}
	&:hover {
	background: rgba($accent, 0.1);
	&::before {
	background-color: $accent;
	}
	}
	}
	.mx_RightPanel_threadsButton::before {
	mask-image: url("$(res)/img/element-icons/room/thread.svg");
	}
	.mx_RightPanel_notifsButton::before {
	mask-image: url("$(res)/img/element-icons/notifications.svg");
	mask-position: center;
	}
	.mx_RightPanel_roomSummaryButton::before {
	mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
	mask-position: center;
	}
	$dot-size: 8px;
	$dot-offset: -3px;
	$pulse-color: $alert;
	.mx_RightPanel_pinnedMessagesButton {
	&::before {
	mask-image: url("$(res)/img/element-icons/room/pin.svg");
	mask-position: center;
	}
	}
	.mx_RightPanel_headerButton_unreadIndicator_bg {
	position: absolute;
	right: $dot-offset;
	top: $dot-offset;
	margin: 4px;
	width: $dot-size;
	height: $dot-size;
	border-radius: 50%;
	transform: scale(1.6);
	transform-origin: center center;
	background: rgba($background, 1);
	}
	.mx_RightPanel_headerButton_unreadIndicator {
	position: absolute;
	right: $dot-offset;
	top: $dot-offset;
	margin: 4px;
	&.mx_Indicator_red {
	background: rgba($alert, 1);
	box-shadow: rgba($alert, 1);
	}
	&.mx_Indicator_gray {
	background: rgba($room-icon-unread-color, 1);
	box-shadow: rgba($room-icon-unread-color, 1);
	}
	&.mx_Indicator_bold {
	background: rgba($primary-content, 1);
	box-shadow: rgba($primary-content, 1);
	}
	}
	.mx_RightPanel_timelineCardButton {
	&::before {
	mask-image: url("$(res)/img/element-icons/feedback.svg");
	mask-position: center;
	}
	}
	@keyframes mx_RightPanel_indicator_pulse {
	0% {
	transform: scale(0.95);
	}
	70% {
	transform: scale(1);
	}
	100% {
	transform: scale(0.95);
	}
	}
	@keyframes mx_RightPanel_indicator_pulse_shadow {
	0% {
	opacity: 0.7;
	}
	70% {
	transform: scale(2.2);
	opacity: 0;
	}
	100% {
	opacity: 0;
	}
	}
	.mx_RightPanel_headerButton_unread {
	&::before {
	background-color: $room-icon-unread-color !important;
	}
	}
	.mx_RightPanel_headerButton_highlight,
	.mx_RightPanel_headerButton:hover {
	&::before {
	background-color: $accent !important;
	}
	}
	.mx_RightPanel_headerButton_badge {
	font-size: $font-8px;
	border-radius: 8px;
	color: $accent-fg-color;
	background-color: $accent;
	font-weight: bold;
	position: absolute;
	top: -4px;
	left: 20px;
	padding: 2px 4px;
	}

Though there is a class mx_HeaderButtons, it is used for a div wrapper of buttons, whose class is mx_RightPanel_headerButton, not mx_RoomHeader_button.

Since refactoring the whole block is too much for this PR, I would leave it for another PR dedicated to that task.

[richvdh]

It seems that creating ` is likely to require refactoring of the block below

How so?

I am literally thinking that you would replace all references in the code to mx_RightPanel_headerButton and mx_RoomHeader_button with mx_HeaderButton. None of the other classes in the CSS you link to would be affected.

[luixxiul]

Sorry, my explanation was not correct.

What I'm worried is that renaming mx_RightPanel_headerButton to mx_HeaderButton for example requires renaming other selectors as well, otherwise it would break the naming status like below:

.mx_RightPanel_headerButtonGroup { 
    ...
} 

.mx_HeaderButton { 
    ...
} 
  
.mx_RightPanel_threadsButton::before {
    ...
}
...

It seems to me that mx_RightPanel_threadsButton::before etc. should be renamed to mx_HeaderButton_threadsButton::before etc, in order to avoid confusion. What do you think?

[richvdh]

I don't think it is necessary to rename mx_RightPanel_headerButtonGroup or mx_RightPanel_threadsButton.

[luixxiul]

As the risk of occurring a regression is high due to the nature of style codebase discussed like here, I would not recommend to proceed with changing a class name before setting up a screenshot test. I think that currently it is risky to decide where the merged style rules are placed, without having the test on Percy.

I guess that after this PR with Percy enabled is merged, a base branch snapshot is created on Percy and regressions which would be caused by changing a name should be able to be detected. Otherwise, another PR for the test should be created, cherry-picking the commit for the test, and merged before this PR.

[richvdh]

I don't particularly agree that the risk of a regression in this case is significant compared to the cost of further propagating this duplicate code, but let's get on and land this rather than arguing about it.

[richvdh]

minor changes as requested above

[richvdh]

Thanks for the contribution @luixxiul !