"Call again" button text overflows on narrow screens

[afranke]

Steps to reproduce

1. Try to call someone and have them decline. A card appears in the timeline with a "Call again” button.
2. Have the window be a narrow width (on my 1050px wide monitor, or when I half-tile on my 1680px wide one → 840px)

What happened?

The button looks like this:

What did you expect?

The button (background) should be resized to fit its text content.

Operating system

Fedora 34

Browser information

Firefox 90.0.2

URL for webapp

app.element.io

[SimonBrandner]

Partially fixed on develop.element.io and the rest will come in matrix-org/matrix-react-sdk#6618

[afranke]

develop indeed looks better. The card takes only about half the width of the timeline though, not sure that’s expected.

[SimonBrandner]

develop indeed looks better. The card takes only about half the width of the timeline though, not sure that’s expected.

Yes, if the card collapses if there isn't enough of space

[kittykat]

I'm on up-to-date develop.element.io

[SimonBrandner]

I'm on up-to-date develop.element.io

I am not sure if we can do much here, you've squashed the timeline quite a lot... So either this happens or we set a min-width and let the tile overflow the timeline.

@gaelledel do you have any thoughts on this? Should we set a min-width?