Unchecked checkboxes are circular

[robintown]

Steps to reproduce

1. Open one of the sort/appearance menus in the room list

Outcome

What did you expect?

Checkboxes are boxes

What happened instead?

Checkboxes are circles, and therefore look like radio buttons

Operating system

NixOS unstable

Browser information

Firefox 114.0.1

URL for webapp

develop.element.io

Application version

Element version: 01a234a-react-2a7780052e60-js-5751df1288b3 Olm version: 3.2.14

Homeserver

Not relevant

Will you send logs?

No

[germain-gg]

Me and @andybalaam are not able to reproduce.
Could you check whether this still happens on your side?

[andybalaam]

I am unable to reproduce this with the latest code, using Firefox 115 on Ubuntu.

[andybalaam]

Going ahead with the release candidate even though this is still open, since it looks like it got fixed in the meantime.

[t3chguy]

@andybalaam I can reproduce on Firefox

Compared with staging

[andybalaam]

OK, I can now reproduce on Firefox at both small and large font sizes:

[andybalaam]

(Especially small?)

[andybalaam]

I actually think the difference between checked and unchecked is a slight red herring, and the main issue is that they are both too round. Checked and unchecked have identical values of height, width and border-radius, so the slightly different rendering appears to be a Firefox quirk which is particularly noticeable when they are quite round.

[andybalaam]

At both small sizes:

and large sizes:

0.27rem looks similar to how it looked before, on Firefox.

[andybalaam]

The same problem is visible on Chromium, and the same fix (0.27rem) looks good:

[andybalaam]

So I am going to attempt a fix that just changes this one number.

[andybalaam]

A quick search of the source code finds no similar values elsewhere.