Issue
When adding some components to a row the hit area for the component spans the whole row.
Steps to reproduce
Add the following to create checkboxes and labels on the same row:
let spacerWidth = 42;
let elementDialogLabelWidth = 120;
h("label", { class: "row", style: { alignItems:"center" } },
h("span", { style: { width: elementDialogLabelWidth } }, ""),
h("span", { style: { width: elementDialogLabelWidth }, title:"" }, "Center Horizontally"),
h("input", { type: "checkbox", checked: false,
onchange(e) { }}),
h("span", { style: { width: spacerWidth } }, ""),
h("span", { style: { width: elementDialogLabelWidth }, title:"" }, "Center Vertically"),
h("input", { type: "checkbox", checked: false,
onchange(e) { }}),
)
Click on the first checkbox.
Click to the left and right of it of the first checkbox.
Expected Behavior
When clicking the checkbox the checkbox is toggled on and off. When clicking the row, the labels nothing should happen since they do not have event handlers.
Actual Behavior
When clicking the checkbox the checkbox is toggled on and off. When clicking the row, the checkbox is toggled on and off.