Fixup pager vertical position

[kaste]

The position variation comes from a rounding error introduced deep down in .pager-nav-symbol:top 0.07em (which is 1.68 iirc px).
The line-height fix is not doing anything as we don't have a different font-size here. If we fix the 0.07em to 2px (or any other stable px value) we have a stable position, or a stable, easy way to align the icons vertically (which is difficult as we know because of their thin and loose bottom end). top: -15 instead of top -16 decreases the gap to the card so that the h2 on the left side and the pagination on the right side have the same gap, which is or is not desirable. However the light and smaller right size tends to fly quicker (looses the connection) than the bold and heavy h2. (That's why, in the old WS/layout, the right side was usually 1px nearer to the card than the left side. Slightly falling.)

After

[kaste]

The 0.07 -- I did this 🤟 -- is giving the headaches.

[braver]

😵‍💫

[kaste]

Why is it that these heading elements on the left and the pager nav or dates on the right are not on the same bottom line, basically by default? Why do we even have a top -16 or now top -15 here.

Example:

Here I have on the left 18px, on the right 19px gap to the first card. Why is that magically 1px wrong, instead of magically just on a line? I made all these in the first place and they were never right by doing ... nothing.

[braver]

That is a very good question I have asked myself a couple of times already. I've just been going with pushing stuff around instead of sitting down and thinking about it.

Using flex box with alignment on the baseline should "just work"™️ . Instead, the elements are end-aligned, and then everything falls apart and needs to be adjusted with paddings and relative positioning. If I change .search-results-header to align-items: baseline; and then go and remove, paddings, offsets and other align properties on child elements, everything does fall into place naturally.

Of course, this is a relatively well designed font, but still the 28px bold characters might not sit exactly on the same line as the 14px characters. This is technically correct, baseline aligned:

.pager-header uses align-items center, instead of end, but that's equally problematic. If I do the same thing, set it to baseline and then remove paddings, margins and positioning from the child elements, again everything falls back in line easily (only the icons need to be adjusted slightly, but that's normal):

Long story short, align-items: baseline is your friend :)