Overlapping html label element prevents from selecting adjacent image template

[binary-sequence]

Issue Description

On https://build.opensuse.org/image_templates When "Application Container using Dockerfile" is selected And I try to select "openSUSE Tumbleweed Minimal Images" Then it doesn't get selected, because the html label of the adjacent image template overlaps the radio button.

Expected Result

On https://build.opensuse.org/image_templates When "Application Container using Dockerfile" is selected And I try to select "openSUSE Tumbleweed Minimal Images" Then it gets selected.

Screenshot

[ncounter]

Would you mind to tell us about the device and browser version you're using? It may be a corner case to handle properly, as it works well on the most common and tested scenarios instead. Thank you for reporting it.

[binary-sequence]

I can reproduce it on all my machines

• openSUSE Tumbleweed (Chrome, Firefox)
• MacOS (Safari, Chrome, Firefox)

Since you mentioned that it works on all common and tested scenarios, I have tried on another monitor, I it looked good. So, I thought it could be a different window size (caused by different resolution screen). And I can now reproduce it on the other screen when I resize the window smaller.

Screen recording on Tumbleweed with Chrome (I couldn't get the cursor recorded...) https://github.com/openSUSE/open-build-service/assets/2727538/5fbe2b65-5bdc-490c-b2d5-6c0b9f67e561

[binary-sequence]

Any update here? I think I didn't describe the problem properly.

The responsive design is not working, on any device, on any browser, since the boxes overlap each other between screen size steps. For example, starting at windows.innerWidth of 768, the boxes overlap until windows.innerWidth of 795, and so on. The problem is even more noticeable from 992 to 1490.

I encountered the problem because my screen width resolution at home is between 992 and 1490. Any device and browser using a screen width resolution between those ranges will encounter the problem.

[ncounter]

@binary-sequence thank you for all the details. I was finally able to reproduce it on a specific combination of browser-resolution, not on any tough, but still on one case at least. Just to name some: on Firefox (115.12.0) there is no way I can reproduce it, but on Chrome (126.0.6478.126) it does.

In the meanwhile, as a workaround until it is fixed properly, in order to be able to select the unselectable radio button, either you resize the window to a different resolution, or you can click on the text description of the box, it will select the related box. For instance, if you're trying to select openSUSE Tumbleweed Minimal Images, clicking on Images based on Tumbleweed for several platforms. text will select it eventually.