"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?

[kittykat]

I am using half my screen rather than a full screen, I don't feel like that's an unreasonable thing to do - I often do that for other websites (e.g. GitHub, Etherpad, Google Docs/Sheets). The monitor is 1920 wide, so the window is 960 px wide.

[SimonBrandner]

I am using half my screen rather than a full screen, I don't feel like that's an unreasonable thing to do - I often do that for other websites (e.g. GitHub, Etherpad, Google Docs/Sheets). The monitor is 1920 wide, so the window is 960 px wide.

Definitely agreed, matrix-org/matrix-react-sdk#6618 should fix this. In the first picture, it looked like you had the window smaller than that though

[kittykat]

In the first one, there's space for the button to be double the height so it matches the "call declined" text for height