Created attachment 957115 [details] screenshot Version-Release number of selected component (if applicable): 19.0rc2 Steps to Reproduce: 1. Use Firefox, update preferences to set a minimum font size of 16px 2. Open the Beaker system page Actual results: Weird pokey bit below the triangle portion of the nav list (see screenshot). Expected results: Normal triangle. Additional info: I discovered today an interesting feature of Firefox. If an element's font size is scaled up from the value requested in CSS (14px for Bootstrap), because of a minimum font size in the user's preferences (16px in my case, due to the high res monitor), Firefox also scales up the requested line-height (20px for Bootstrap) by the same factor. I guess to keep things from looking too squished? However in the CSS border hack which I used to make the right-pointing triangles in the system tab nav list, the sizes are assumed to match the height of the element, which is assumed to be the line-height (20px).
As a workaround we can set a fixed height (rather than just line-height) on the nav list items. It's not great, since it makes things look a bit squished when the text is scaled to 16px as in my browser, but the triangles match up properly then. http://gerrit.beaker-project.org/3485
Beaker 19.1 is released.