Closed Pineirin closed 1 year ago
Explanation of the change:
This issue is caused by the addition of the "labeled icon" class. My hypothesis is that the "position: absolute" is causing the problem, as now the icon is not centered in relation to the parent element but using a "transform: translateY(-50%) instead. The previous solution was creating a misalignment because the height of the text and the height of the icon were different, causing the center to be in different places. While the height of the icon is equal to the line height defined for the parent element, the height of the text is equal to the line height plus two pixels; as far as I understand, this two pixels come from the white space of the text. The idea of the solution was to add those two pixels to the height of the icon element so it both elements have the same height and they get properly aligned.
As seen in the screenshots now the icon keeps centered with different line-heights.
Even if the alignment still seems a bit off, it is due to the icon not being symmetric, and using another icons it becomes more clear.
closed as this won't be an optimal solution
closes: inveniosoftware/invenio-theme#335