fix(nav): isolate publish chip width with grid + button toggle

Render multi-type 发布 as button, size wrapper with inline-grid so the
absolute menu cannot widen the chip on click/focus-within.

assets/css/frontend/nav/header-menu-buttons.css

@@ -25,21 +25,22 @@
   max-width: none;
 }
 
-/* CTA paint only on actual anchors/buttons — never on hover wrappers */
+/* CTA paint only on real controls — never on hover wrappers / menu items */
 .navbar-but-cluster a.navbar-cta,
 .navbar-but-cluster a.btn-primary,
 .navbar-but-cluster a.but.btn-primary,
 .navbar-but-cluster a.navbar-newposts.but,
-.navbar-but-cluster a.but:not(.newadd-btns__item),
+.navbar-but-cluster button.navbar-cta,
-.navbar-but-cluster button.navbar-cta {
+.navbar-but-cluster button.newadd-btns__toggle,
+.navbar-but-cluster a.but:not(.newadd-btns__item) {
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   gap: 6px;
-  padding: 0 14px;
+  padding: 0 14px !important;
-  height: 34px;
+  height: 34px !important;
-  min-height: 34px;
+  min-height: 34px !important;
-  max-height: 34px;
+  max-height: 34px !important;
   border-radius: var(--navbar-cta-radius, 20px);
   background: var(--color-primary, #2f6df6);
   color: #fff !important;
@@ -50,17 +51,27 @@
   white-space: nowrap;
   box-sizing: border-box;
   vertical-align: middle;
-  flex: 0 0 auto;
+  flex: 0 0 auto !important;
   width: auto !important;
-  max-width: none;
+  max-width: none !important;
-  min-width: 0;
+  min-width: 0 !important;
+  margin: 0 !important;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+  font-family: inherit;
 }
 
 .navbar-but-cluster a.navbar-cta > i,
 .navbar-but-cluster a.but > i,
 .navbar-but-cluster a.btn-primary > i,
+.navbar-but-cluster button.navbar-cta > i,
+.navbar-but-cluster button.newadd-btns__toggle > i,
 .navbar-but-cluster a.navbar-cta .navbar-cta-text,
-.navbar-but-cluster a.navbar-cta > span:not(.badge) {
+.navbar-but-cluster a.navbar-cta > span:not(.badge),
+.navbar-but-cluster button.navbar-cta .navbar-cta-text,
+.navbar-but-cluster button.newadd-btns__toggle .navbar-cta-text,
+.navbar-but-cluster button.newadd-btns__toggle > span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -73,36 +84,35 @@
 
 .navbar-but-cluster a.navbar-cta > i,
 .navbar-but-cluster a.but > i,
-.navbar-but-cluster a.btn-primary > i {
+.navbar-but-cluster a.btn-primary > i,
+.navbar-but-cluster button.navbar-cta > i,
+.navbar-but-cluster button.newadd-btns__toggle > i {
   width: 1em;
   height: 1em;
   font-size: 1em;
   line-height: 1;
 }
 
-/* Multi-type toggle keeps fixed CTA size when menu opens (focus-within). */
+/* Parent shell: shrink-wrap chip only */
-.navbar-but-cluster .newadd-btns__toggle.navbar-cta,
+.navbar-but-cluster .navbar-but,
-.navbar-but-cluster a.newadd-btns__toggle {
+.navbar-but-cluster .navbar-vip {
-  flex: 0 0 auto !important;
-  width: auto !important;
-  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;
+  overflow: visible !important;
+  display: inline-flex !important;
+  align-items: center;
   width: auto !important;
-  max-width: fit-content;
+  max-width: none !important;
+  min-width: 0 !important;
   flex: 0 0 auto !important;
+  height: 34px;
 }
 
 .navbar-but-cluster .payvip-icon.but,
 .navbar-but-cluster a.payvip-icon {
   background: linear-gradient(90deg, #ff6b6b, #f04494);
   color: #fff;
-  padding: 6px 12px;
+  padding: 0 12px !important;
+  height: 34px !important;
   border-radius: var(--navbar-cta-radius, 20px);
   text-decoration: none;
   font-size: 13px;
@@ -112,22 +122,20 @@
   margin-left: 0;
 }
 
-/* Publish multi-type dropdown
+/*
- *
+ * Publish multi-type dropdown
- * Wrapper MUST be inline-block (not flex): an absolute dropdown as a flex
+ * inline-grid with one max-content column sized ONLY by the in-flow toggle.
- * child can still inflate the parent's used width on open/focus-within.
+ * Absolute dropdown is out of track sizing so open cannot widen the chip.
- * 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 !important;
-  display: inline-block !important; /* not flex — isolates absolute menu width */
+  display: inline-grid !important;
+  grid-template-columns: max-content;
+  grid-template-rows: 34px;
+  justify-items: stretch;
+  align-items: center;
   vertical-align: middle;
   z-index: 40;
   background: transparent !important;
@@ -136,24 +144,25 @@
   margin: 0 !important;
   border: 0 !important;
   box-shadow: none !important;
-  /* Shrink-wrap to toggle only; never grow with open menu */
+  width: auto !important;
-  width: fit-content !important;
+  max-width: none !important;
-  max-width: fit-content !important;
   min-width: 0 !important;
   height: 34px !important;
   max-height: 34px !important;
-  line-height: 0;
+  line-height: 0 !important;
   overflow: visible !important;
   flex: 0 0 auto !important;
   align-self: center;
   white-space: nowrap;
+  float: none !important;
 }
 
-/* Toggle: fixed chip — click/focus must not change size */
+.navbar-but-cluster .newadd-btns > .newadd-btns__toggle,
-.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle,
+.navbar-but-cluster button.newadd-btns__toggle,
 .navbar-but-cluster a.newadd-btns__toggle,
-.navbar-but-cluster .newadd-btns__toggle.navbar-cta,
+.navbar-but-cluster .newadd-btns__toggle.navbar-cta {
-a.newadd-btns__toggle.navbar-cta {
+  grid-column: 1;
+  grid-row: 1;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
@@ -164,43 +173,44 @@ a.newadd-btns__toggle.navbar-cta {
   padding: 0 14px !important;
   margin: 0 !important;
   width: auto !important;
-  min-width: 0 !important;
   max-width: none !important;
-  flex: 0 0 auto !important;
+  min-width: 0 !important;
   box-sizing: border-box !important;
   white-space: nowrap !important;
-  vertical-align: middle;
+  position: relative;
-  /* Prevent focus outline from looking like width growth */
+  z-index: 2;
-  outline-offset: 2px;
+  justify-self: start;
 }
 
-.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:focus,
+.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:focus,
-.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:focus-visible,
+.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:focus-visible,
-.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:active,
+.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:active,
-.navbar-but-cluster .newadd-btns.hover-show:focus-within > a.newadd-btns__toggle {
+.navbar-but-cluster .newadd-btns.hover-show:hover > .newadd-btns__toggle,
+.navbar-but-cluster .newadd-btns.hover-show:focus-within > .newadd-btns__toggle {
   width: auto !important;
-  max-width: none !important;
   padding: 0 14px !important;
   height: 34px !important;
+  transform: none !important;
+  opacity: 1;
 }
 
-/* Menu is purely out-of-flow; fixed min width independent of toggle */
+.navbar-but-cluster .newadd-btns > .drop-newadd,
-.navbar-but-cluster .newadd-btns .drop-newadd,
 .navbar-but-cluster .newadd-btns .hover-show-con.drop-newadd,
-.newadd-btns .drop-newadd,
+.newadd-btns > .drop-newadd,
 .newadd-btns .hover-show-con.drop-newadd {
+  grid-column: 1;
+  grid-row: 1;
   display: block !important;
   position: absolute !important;
   top: 100% !important;
   right: 0 !important;
   left: auto !important;
+  bottom: 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;
+  max-width: 168px !important;
   margin: 0 !important;
-  /* Transparent hover bridge — part of the panel hit area */
   padding: 10px 0 6px !important;
   background: transparent !important;
   border: 0 !important;
@@ -210,21 +220,19 @@ a.newadd-btns__toggle.navbar-cta {
   visibility: hidden;
   transform: translateY(4px);
   transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
-  z-index: 1200;
+  z-index: 1200 !important;
   pointer-events: none;
   box-sizing: border-box !important;
-  /* Absolute: never affect parent inline-size */
+  justify-self: end;
-  inset-inline-end: 0;
 }
 
-/* Solid readable plate under the bridge */
 .navbar-but-cluster .newadd-btns .drop-newadd::before,
 .newadd-btns .drop-newadd::before,
 .newadd-btns .hover-show-con.drop-newadd::before {
   content: "" !important;
   display: block !important;
   position: absolute;
-  inset: 8px 0 0 0; /* sit below the transparent bridge */
+  inset: 8px 0 0 0;
   background: #ffffff !important;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-radius: 8px;
@@ -233,14 +241,12 @@ a.newadd-btns__toggle.navbar-cta {
   pointer-events: none;
 }
 
-.navbar-but-cluster .newadd-btns.hover-show:hover .drop-newadd,
+.navbar-but-cluster .newadd-btns.hover-show:hover > .drop-newadd,
+.navbar-but-cluster .newadd-btns.hover-show:focus-within > .drop-newadd,
 .navbar-but-cluster .newadd-btns.hover-show:hover .hover-show-con.drop-newadd,
-.navbar-but-cluster .newadd-btns.hover-show:focus-within .drop-newadd,
 .navbar-but-cluster .newadd-btns.hover-show:focus-within .hover-show-con.drop-newadd,
-.newadd-btns.hover-show:hover .drop-newadd,
+.newadd-btns.hover-show:hover > .drop-newadd,
-.newadd-btns.hover-show:hover .hover-show-con.drop-newadd,
+.newadd-btns.hover-show:focus-within > .drop-newadd {
-.newadd-btns.hover-show:focus-within .drop-newadd,
-.newadd-btns.hover-show:focus-within .hover-show-con.drop-newadd {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);

inc/helpers/aksrt-header-menu-buttons.php

@@ -186,12 +186,14 @@ if (!function_exists('aksrt_render_new_add_btns')) :
 		}
 
 		$html  = '<span class="' . esc_attr(trim(implode(' ', $wrap_tokens) . ' hover-show')) . '">';
-		$html .= '<a href="javascript:;" class="' . esc_attr(trim('but newadd-btns__toggle navbar-cta ' . $cta_class)) . '" rel="nofollow">'
+		// type=button keeps focus without navigating; avoids link min-width quirks.
+		$html .= '<button type="button" class="' . esc_attr(trim('but newadd-btns__toggle navbar-cta ' . $cta_class)) . '">'
 			. $label_html
-			. ' <i class="fas fa-caret-down" aria-hidden="true"></i></a>';
+			. ' <i class="fas fa-caret-down" aria-hidden="true"></i></button>';
-		$html .= '<div class="hover-show-con dropdown-menu drop-newadd">';
+		// Sibling dropdown (not a flex child of the painted chip).
+		$html .= '<div class="hover-show-con drop-newadd" role="menu">';
 		foreach ($actions as $a) {
-			$html .= '<a rel="nofollow" class="newadd-btns__item" href="' . esc_url($a['url']) . '">';
+			$html .= '<a rel="nofollow" class="newadd-btns__item" role="menuitem" href="' . esc_url($a['url']) . '">';
 			$html .= '<i class="' . esc_attr($a['icon']) . '" aria-hidden="true"></i> '
 				. '<span>' . esc_html($a['label']) . '</span>';
 			$html .= '</a>';