Checkbox clickable area not as big as the size of the checkbox

[AbdullahGheith]

Description of the bug

If i add a checkbox to an empty page, and add the following css:

vaadin-checkbox {
  border: 2px solid #ccc;
  width:100%;
}

The checkbox will not be clickable within the border, but the animation for hover/click animations occur without the checkbox being triggered

Expected behavior

Checkbox should be clickable in all of the checkbox's sizearea

Minimal reproducible example

Add a checkbox to an empty page, and extend its size. It will only be clickable in the text and the squared checkbox itself

              Checkbox checkbox = new Checkbox();
               checkbox.setLabel("Clickable here");
               checkbox.setWidth("100%");
               checkbox.getStyle().set("border", "2px solid #ccc");

Versions

• Vaadin / Flow version: 24.4.13
• Java version: 17
• OS version: 11
• Browser version (if applicable): Chrome
• Application Server (if applicable): Spring boot
• IDE (if applicable): Intellij