arrow in menu and livesearch checkbox not vertically aligned

[vincentfretin]

In Plone 5.2.2 / plonetheme.barceloneta 2.1.7
the arrow in menu and livesearch checkbox are not vertically aligned.

Chrome + Ubuntu 18.04

For the checkbox in livesearch, I'm wondering if it's not OS specific.
I'm on Ubuntu 18.04. What do you folks have? Can you please share a screenshot in macOS or Windows? @ale-rt ?

Better looking should be:

Do you agree?

input[type="radio"], input[type="checkbox"] {
    /* margin: 4px 0 0;*/
}

@media (min-width: 768px) {
.plone-nav li label:after {
    padding: 0.75em 1em 0em 0; // instead of 0.5em 1em 0.5em 0
}
}

[vincentfretin]

Ha ha, commenting the checkbox rule to fix the livesearch checkbox changed the checkbox in resources registry, now its not aligned anymore. :-)

[ale-rt]

Chrome + Ubuntu 20.04

Firefox + Ubuntu 20.04

The arrow looks slightly better aligned with FF, but the check box is broken in both.
I agree with removing the checkbox margin maybe .searchSection to make it specific.

[vincentfretin]

Ha ha, why do have a smaller arrow in FF Ubuntu 20.04? :)
My previous screenshot was on Chrome Ubuntu 18.04.

Chrome + Ubuntu 18.04

Firefox + Ubuntu 18.04

The arrow alignment seems perfect on this one.

[vincentfretin]

In PR #206 the commit 32dea29 fix the issue for the search checkbox with vertical-align: middle on the label and removing the margin on the checkbox. (tested with Firefox 78 and Chrome 83 on Ubuntu 18.04 and Safari on iPad iOS 13.5.1)

[vincentfretin]

I gave up for the arrow, it will stay like this.