coreui / coreui-pro / 32955224714

93%

main: 94%

push

github

fix: stop Safari adding a marker line above nav, pagination and menu items (#916)

Safari lays out a list-marker line box for an `<li>` that computes to
`display: list-item` under `list-style-type: ""` whenever its child is a
flex container holding an `<svg>`. Every item with an icon therefore
rendered one line-height taller than its link — 24px at the default font
size — so navs, the navbar, the header nav, the sidebar nav, pagination
and menus all sat too tall and too loose. Chromium and Firefox lay the
same markup out correctly.

Give those item elements a display of their own so they stop generating
a marker: `.nav-item`, `.page-item` and the bare `<li>` children of
`.menu` become flex. The sidebar's `.nav-item` carries a link plus an
optional sub-list, so it keeps them stacked with `flex-direction:
column` instead of the row a plain `display: flex` would give it.

Item heights now match between Safari and Chromium across nav, nav-tabs,
nav-pills, nav-underline, nav-fill, nav-justified, navbar-nav,
header-nav, pagination, menu and a navbar dropdown; widths are unchanged
in both engines.

4619 of 5202 branches covered (88.79%)

Branch coverage included in aggregate %.

8831 of 9244 relevant lines covered (95.53%)

392.96 hits per line