diff --git a/web_src/css/base.css b/web_src/css/base.css index 018c7d7bcd5f7..fdfbea610b8de 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1778,15 +1778,6 @@ table th[data-sortt-desc] .svg { border-color: var(--color-secondary); } -.ui.tabular.menu .item { - padding: 11px 12px; - color: var(--color-text-light-2); -} - -.ui.tabular.menu .item:hover { - color: var(--color-text); -} - .ui.tabular.menu .active.item, .ui.tabular.menu .active.item:hover { background: var(--color-body); @@ -1803,17 +1794,36 @@ table th[data-sortt-desc] .svg { border-color: var(--color-secondary); } +.ui.tabular.menu .item, .ui.secondary.pointing.menu .item { + padding: 11px 12px !important; color: var(--color-text-light-2); } +.ui.tabular.menu .item:hover, +.ui.secondary.pointing.menu a.item:hover { + color: var(--color-text); +} + .ui.secondary.pointing.menu .active.item, .ui.secondary.pointing.menu .active.item:hover, -.ui.secondary.pointing.menu .dropdown.item:hover, -.ui.secondary.pointing.menu a.item:hover { +.ui.secondary.pointing.menu .dropdown.item:hover { color: var(--color-text-dark); } +.ui.tabular.menu .active.item, +.ui.secondary.pointing.menu .active.item, +.resize-for-semibold::before { + font-weight: var(--font-weight-semibold); +} + +.resize-for-semibold::before { + content: attr(data-text); + visibility: hidden; + display: block; + height: 0; +} + .ui.header { color: var(--color-text); } diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css index f66df4cd8b2b4..e998bb9a73887 100644 --- a/web_src/css/repo/header.css +++ b/web_src/css/repo/header.css @@ -8,6 +8,7 @@ flex-flow: row wrap; justify-content: space-between; gap: 0.5rem; + margin-bottom: 4px; } .repo-header .flex-item { diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js index 9fa45855677fe..604fce7d4bb4d 100644 --- a/web_src/js/webcomponents/overflow-menu.js +++ b/web_src/js/webcomponents/overflow-menu.js @@ -127,6 +127,25 @@ window.customElements.define('overflow-menu', class extends HTMLElement { }); init() { + // for horizontal menus where fomantic boldens active items, prevent this bold text from + // enlarging the menu's active item replacing the text node with a div that renders a + // invisible pseudo-element that enlarges the box. + if (this.matches('.ui.secondary.pointing.menu, .ui.tabular.menu')) { + for (const item of this.querySelectorAll('.item')) { + for (const child of item.childNodes) { + if (child.nodeType === Node.TEXT_NODE) { + const text = child.textContent.trim(); // whitespace is insignificant inside flexbox + if (!text) continue; + const span = document.createElement('span'); + span.classList.add('resize-for-semibold'); + span.setAttribute('data-text', text); + span.textContent = text; + child.replaceWith(span); + } + } + } + } + // ResizeObserver triggers on initial render, so we don't manually call `updateItems` here which // also avoids a full-page FOUC in Firefox that happens when `updateItems` is called too soon. this.resizeObserver = new ResizeObserver((entries) => {