Dropdown is not vertically aligned with `<a>` in `<nav>`

[carlreinke]

Describe the issue

A dropdown in a <nav> is slightly misaligned with an anchor in the nav. The text of the dropdown is also slightly misaligned even after aligning the outlines.

Current Behavior

Expected Behavior

or

Reproduction URL

https://picocss.com/docs/nav#dropdowns (I added style="outline: 1px solid red;" on the <a> and <summary>.)

Environment

Firefox on Windows 10

[FireIsGood]

This seems to be caused by the height being set manually but calculating incorrectly. The current version as shown in the reproduction URL does not account for the border decreasing the size of the content box or something like that.

Here's one of the places the height is set:

nav details.dropdown summary:not([role]) {
    height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
    padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
}

As seen in the original post

We can note that the height is set manually and accounts for both 1rem times the line height to get the height of a root element line, then adds the padding again.

I'm not sure the exact reason as there seems to be a bit of negative margins or other shenanigans used on the nav elements I haven't taken a peek at, but adding this seems to be a quick fix on this specific case:

nav details.dropdown summary:not([role]) {
    height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 - 2 * var(--pico-border-width));
}

I'm not able to look into this further myself, so I hope this helps anyone looking into this later!

[ckemere]

This issue hasn't seen much updates, but I can confirm that the weird rendering is only present in Firefox, rather than Chrome (and Safari).

[valokammi]

Confirm that there is offsets in dropdown! Tested Firefox and Brave. It is even worse in mobile Firefox.

[dev-willis]

Setting a fixed height seems like the wrong approach to me.