Ellipsis on long spaces name make the space panel size jump

[AmandineLP]

No description provided.

[novocaine]

2021-11-25.-.Spaces.ellipsis.jump.mov

[t3chguy]

I cannot reproduce this.
Version, environment, browser etc would be helpful

Screen.Recording.2021-11-25.at.12.09.01.mov

[bwindels]

Seeing this on element desktop 1.9.5, Fedora 35 with Gnome 41.1 on wayland.

[t3chguy]

Likely Chromium specific, will investigate once again

[t3chguy]

Hmm, I'm unable to reproduce in Chrome too.

Screen.Recording.2021-11-25.at.13.06.53.mov

Would be good to get version info from the original reporter.

@bwindels are you able to repro on Nightly/Develop at all?

[AmandineLP]

Element Nightly version: 2021112501
Olm version: 3.2.3

cf https://github.com/matrix-org/element-web-rageshakes/issues/6917

[jaller94]

With the same account I can reproduce this on:

1

Mozilla Firefox 95.0b8
https://staging.element.io
Element version: 1.9.5

2

Mozilla Firefox 95.0b8
https://develop.element.io
Element version: 2021-11-29

3

Chromium 96.0.4664.45 Arch Linux
https://staging.element.io
Element version 1.9.5

[jaller94]

These steps to reproduce assume the English (UK) locale. The panel width depends on the labels "All rooms" and "Create a space".

Steps to reproduce:

1. Have no long space names or sub-spaces which push the panel width to its maximum width.
2. Create a space called "Create a spa" or longer.
3. Hover over the space in the panel.

Known conditions:

• Have at least one space name that's as long as the "Create a space" button.
• Have no space name which is so long that it needs to be truncated by the CSS ellipses.

Right length to reproduce

No name is as long as "Create a space" (minimum panel width)

One name is too long to reproduce (maximum panel width)

[dkasak]

The space names don't have to be long for this to happen. I think in this case the requisite condition is that the hovered space is a parent space and that its section is expanded. When collapsed, it stops happening. This is on Element Desktop 1.9.9.

[jaller94]

For me it's the other way around where the width flickers with all parent spaces collapsed.

[justjanne]

Investigation

The list has a maximum width equivalent to the width of the largest element, or a given fixed maximum. If the longest element is an actual space (not the users own profile item, nor the settings or "create new space" item) the issue can occur.

The issue occurs because at that point the width of the entire panel is determined by the width of this longest space name. When hovering, the ellipsis menu appears, increasing the width of this space item, in turn increasing the width of the entire panel.