Tested on a 480x800 emulator

Maybe it will need feedback from @schoenbaechler

Oh dear. The naive solution - scaling the button text to match the available area - might not actually make these more readable on small screens. @schoenbaechler, have a think - perhaps we want to stack the buttons on small screens, for example.

Yes @Charlotte, let’s arrange them in a 2x2 grid when space is not sufficient (e.g. below a viewport width of 360px):

Thanks @cooltey

Hi @Charlotte and @schoenbaechler

Yes @Charlotte, let’s arrange them in a 2x2 grid when space is not sufficient (e.g. below a viewport width of 360px):

I am not sure about the 2x2 grid that bases on the device's resolution since it requires another layout to do it. (and maybe a little code to check it)

Since the 480x800 is a pretty old resolution device (~5 years ago), and I think that would be a low usage for now.

This is the screenshot of the previous version that uses the old app button component and shows the same results as now.

Here's the screenshot that I think it might be a solution for this if the device has a low resolution.

and, we can change the font size to 12sp and it would solve the issue that Anthony found.

Hi @cooltey, reducing font size to 12sp below a certain resolution is a passable way to solve this. At which resolution (breakpoint) would you apply it? I estimate that we should apply 12sp below 360dp. In CSS, that would look like this:

// default font-size
.button {
	font-size: 14sp;
}

// size on smaller screens
@media screen and (max-width: 360dp) {
	.button {
		font-size: 12sp;
	}
}

Not sure if you can apply something like that? I don’t recommend to globally use 12sp for these buttons as it’s too hard to read (too small). In regards to truncating it, not the best solution but if we’re applying 12sp then it’s ok as this would only occur on tiny device widths.

Hi @schoenbaechler
As we discussed on Slack, we will use 2x2 grid buttons with a 300dp width each row globally, for now.

And, here is the screenshot of how it looks at 480x800 and 1440x2960 emulators:

Looks good @cooltey, moving it to QA signoff!

Looks fixed on 2.7.50288-beta-2019-08-22