Maria A Nunez 01bb3dcf7a MM-64977: Fix channel switcher row overlap with long channel and team names (#36330)
* MM-64977: Fix channel switcher row overlap with long names

In the Find Channels modal, very long channel names overflowed
their row and visually overlapped the team name shown on the right
because the team label was absolutely positioned and the channel
column did not reserve horizontal space.

Restructure the SwitchChannelSuggestion row to use a real flex
layout: a primary column wrapper holds the channel name and inline
metadata with `flex: 1 1 auto; min-width: 0;` so the name truncates
with an ellipsis, and the team-name span becomes a flex sibling
with `flex: 0 0 auto; max-width: 40%;` so it remains visible. The
channel name is wrapped in WithTooltip whose disabled prop is
driven by a useLayoutEffect-based scrollWidth > clientWidth check,
so the full name is shown on hover only when truncation occurs.

Made-with: Cursor

* MM-64977: Show tooltip on truncated team name as well

Mirror the channel-name tooltip behavior on the team-name span in
the channel switcher row: track its truncation state via the same
useLayoutEffect + ref pattern, and wrap the team name in WithTooltip
whose disabled prop is driven by scrollWidth > clientWidth. Hovering
the team label now reveals the full team display name when (and only
when) it is actually truncated.

Extend existing tooltip tests to assert the team-name tooltip
disabled flag mirrors the truncation state in both branches; loosen
the layout test to permit the WithTooltip wrapper around the team
span while still asserting the team name does not live inside the
primary column.

Made-with: Cursor
2026-05-01 09:09:54 -04:00
2018-05-30 10:23:25 -04:00
2026-04-01 13:03:36 +00:00

Mattermost logo

Mattermost is an open core, self-hosted collaboration platform that offers chat, workflow automation, voice calling, screen sharing, and AI integration. This repo is the primary source for core development on the Mattermost platform; it's written in Go and React, runs as a single Linux binary, and relies on PostgreSQL. A new compiled version is released under an MIT license every month on the 16th.

Deploy Mattermost on-premises, or try it for free in the cloud.

mattermost user interface

Learn more about the following use cases with Mattermost:

Other useful resources:

Table of contents

Install Mattermost

Other install guides:

Native mobile and desktop apps

In addition to the web interface, you can also download Mattermost clients for Android, iOS, Windows PC, macOS, and Linux.

Get Mattermost on Google Play Get Mattermost on the App Store Get Mattermost on Windows PC Get Mattermost on Mac OSX Get Mattermost on Linux

Get security bulletins

Receive notifications of critical security updates. The sophistication of online attackers is perpetually increasing. If you're deploying Mattermost it's highly recommended you subscribe to the Mattermost Security Bulletin mailing list for updates on critical security releases.

Subscribe here

Get involved

Learn more

License

See the LICENSE file for license rights and limitations.

Get the latest news

Contributing

Small Image

Please see CONTRIBUTING.md. Join the Mattermost Contributors server to join community discussions about contributions, development, and more.

S
Description
Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
Readme
2.4 GiB
Languages
TypeScript 48.3%
Go 40.3%
JavaScript 6.6%
SCSS 2.5%
HTML 1.9%
Other 0.2%