diff --git a/assets/css/frontend/nav/header-menu-buttons.css b/assets/css/frontend/nav/header-menu-buttons.css index d040a49c..f990fa5e 100644 --- a/assets/css/frontend/nav/header-menu-buttons.css +++ b/assets/css/frontend/nav/header-menu-buttons.css @@ -85,8 +85,17 @@ .navbar-but-cluster a.newadd-btns__toggle { flex: 0 0 auto !important; width: auto !important; - min-width: 0; - max-width: none; + min-width: 0 !important; + max-width: none !important; +} + +/* Parent shell must not expand with absolute dropdown */ +.navbar-but-cluster .navbar-but { + position: relative; + overflow: visible; + width: auto !important; + max-width: fit-content; + flex: 0 0 auto !important; } .navbar-but-cluster .payvip-icon.but, @@ -105,70 +114,94 @@ /* Publish multi-type dropdown * - * Hover bridge strategy (zibll parity): - * - panel sits at top:100% (NO gap) so the mouse never leaves .hover-show - * - transparent padding-top is the bridge into the menu - * - solid white plate is painted by ::before below the bridge - * - do NOT put solid background on the whole panel (that would fill the bridge) + * Wrapper MUST be inline-block (not flex): an absolute dropdown as a flex + * child can still inflate the parent's used width on open/focus-within. + * Size the wrapper strictly to the toggle chip; menu never contributes. + * + * Hover bridge (zibll parity): + * - panel at top:100% (no gap) + * - transparent padding-top = bridge + * - solid plate via ::before under the bridge */ +.navbar-but-cluster .navbar-but .newadd-btns.hover-show, .navbar-but-cluster .newadd-btns.hover-show, .newadd-btns.hover-show { - position: relative; - display: inline-flex; - align-items: center; - align-self: center; + position: relative !important; + display: inline-block !important; /* not flex — isolates absolute menu width */ + vertical-align: middle; z-index: 40; background: transparent !important; color: inherit !important; padding: 0 !important; - margin: 0; + margin: 0 !important; border: 0 !important; box-shadow: none !important; - width: auto !important; - min-width: 0; - max-width: none; - height: auto !important; - flex: 0 0 auto; + /* Shrink-wrap to toggle only; never grow with open menu */ + width: fit-content !important; + max-width: fit-content !important; + min-width: 0 !important; + height: 34px !important; + max-height: 34px !important; + line-height: 0; + overflow: visible !important; + flex: 0 0 auto !important; + align-self: center; white-space: nowrap; - vertical-align: middle; } -/* Toggle: fixed chip size — never stretch when menu opens */ +/* Toggle: fixed chip — click/focus must not change size */ +.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle, .navbar-but-cluster a.newadd-btns__toggle, .navbar-but-cluster .newadd-btns__toggle.navbar-cta, a.newadd-btns__toggle.navbar-cta { display: inline-flex !important; - align-items: center; - justify-content: center; - gap: 6px; + align-items: center !important; + justify-content: center !important; + gap: 6px !important; height: 34px !important; min-height: 34px !important; - max-height: 34px; + max-height: 34px !important; padding: 0 14px !important; + margin: 0 !important; width: auto !important; - min-width: 0; - max-width: none; + min-width: 0 !important; + max-width: none !important; flex: 0 0 auto !important; - box-sizing: border-box; - white-space: nowrap; + box-sizing: border-box !important; + white-space: nowrap !important; + vertical-align: middle; + /* Prevent focus outline from looking like width growth */ + outline-offset: 2px; } +.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:focus, +.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:focus-visible, +.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:active, +.navbar-but-cluster .newadd-btns.hover-show:focus-within > a.newadd-btns__toggle { + width: auto !important; + max-width: none !important; + padding: 0 14px !important; + height: 34px !important; +} + +/* Menu is purely out-of-flow; fixed min width independent of toggle */ .navbar-but-cluster .newadd-btns .drop-newadd, .navbar-but-cluster .newadd-btns .hover-show-con.drop-newadd, .newadd-btns .drop-newadd, .newadd-btns .hover-show-con.drop-newadd { - display: block; - position: absolute; - top: 100%; - right: 0; - left: auto; - float: none; - width: max-content; - min-width: 160px; - max-width: min(240px, 80vw); - margin: 0; - /* Transparent hover bridge — must stay part of the panel hit area */ - padding: 10px 0 6px; + display: block !important; + position: absolute !important; + top: 100% !important; + right: 0 !important; + left: auto !important; + float: none !important; + /* Fixed width so open state never reads as "button got longer" */ + width: 168px !important; + min-width: 168px !important; + max-width: min(168px, 80vw) !important; + margin: 0 !important; + /* Transparent hover bridge — part of the panel hit area */ + padding: 10px 0 6px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; @@ -179,7 +212,9 @@ a.newadd-btns__toggle.navbar-cta { transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 1200; pointer-events: none; - box-sizing: border-box; + box-sizing: border-box !important; + /* Absolute: never affect parent inline-size */ + inset-inline-end: 0; } /* Solid readable plate under the bridge */