fix(nav): pin publish toggle width on open

Use inline-block wrapper + fit-content so absolute dropdown cannot
inflate 发布 chip width on click/focus-within.
This commit is contained in:
kate522 committed 2026-07-22 09:29:03 +08:00
1 parent 20a5ae9aae
commit aa05c6c81b
1 file changed
+75 -40
+75 -40
View File
@@ -85,8 +85,17 @@
.navbar-but-cluster a.newadd-btns__toggle { .navbar-but-cluster a.newadd-btns__toggle {
flex: 0 0 auto !important; flex: 0 0 auto !important;
width: auto !important; width: auto !important;
min-width: 0; min-width: 0 !important;
max-width: none; 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, .navbar-but-cluster .payvip-icon.but,
@@ -105,70 +114,94 @@
/* Publish multi-type dropdown /* Publish multi-type dropdown
* *
* Hover bridge strategy (zibll parity): * Wrapper MUST be inline-block (not flex): an absolute dropdown as a flex
* - panel sits at top:100% (NO gap) so the mouse never leaves .hover-show * child can still inflate the parent's used width on open/focus-within.
* - transparent padding-top is the bridge into the menu * Size the wrapper strictly to the toggle chip; menu never contributes.
* - solid white plate is painted by ::before below the bridge *
* - do NOT put solid background on the whole panel (that would fill the bridge) * 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, .navbar-but-cluster .newadd-btns.hover-show,
.newadd-btns.hover-show { .newadd-btns.hover-show {
position: relative; position: relative !important;
display: inline-flex; display: inline-block !important; /* not flex — isolates absolute menu width */
align-items: center; vertical-align: middle;
align-self: center;
z-index: 40; z-index: 40;
background: transparent !important; background: transparent !important;
color: inherit !important; color: inherit !important;
padding: 0 !important; padding: 0 !important;
margin: 0; margin: 0 !important;
border: 0 !important; border: 0 !important;
box-shadow: none !important; box-shadow: none !important;
width: auto !important; /* Shrink-wrap to toggle only; never grow with open menu */
min-width: 0; width: fit-content !important;
max-width: none; max-width: fit-content !important;
height: auto !important; min-width: 0 !important;
flex: 0 0 auto; height: 34px !important;
max-height: 34px !important;
line-height: 0;
overflow: visible !important;
flex: 0 0 auto !important;
align-self: center;
white-space: nowrap; 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 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 { a.newadd-btns__toggle.navbar-cta {
display: inline-flex !important; display: inline-flex !important;
align-items: center; align-items: center !important;
justify-content: center; justify-content: center !important;
gap: 6px; gap: 6px !important;
height: 34px !important; height: 34px !important;
min-height: 34px !important; min-height: 34px !important;
max-height: 34px; max-height: 34px !important;
padding: 0 14px !important; padding: 0 14px !important;
margin: 0 !important;
width: auto !important; width: auto !important;
min-width: 0; min-width: 0 !important;
max-width: none; max-width: none !important;
flex: 0 0 auto !important; flex: 0 0 auto !important;
box-sizing: border-box; box-sizing: border-box !important;
white-space: nowrap; 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 .drop-newadd,
.navbar-but-cluster .newadd-btns .hover-show-con.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 { .newadd-btns .hover-show-con.drop-newadd {
display: block; display: block !important;
position: absolute; position: absolute !important;
top: 100%; top: 100% !important;
right: 0; right: 0 !important;
left: auto; left: auto !important;
float: none; float: none !important;
width: max-content; /* Fixed width so open state never reads as "button got longer" */
min-width: 160px; width: 168px !important;
max-width: min(240px, 80vw); min-width: 168px !important;
margin: 0; max-width: min(168px, 80vw) !important;
/* Transparent hover bridge — must stay part of the panel hit area */ margin: 0 !important;
padding: 10px 0 6px; /* Transparent hover bridge — part of the panel hit area */
padding: 10px 0 6px !important;
background: transparent !important; background: transparent !important;
border: 0 !important; border: 0 !important;
box-shadow: none !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; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 1200; z-index: 1200;
pointer-events: none; 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 */ /* Solid readable plate under the bridge */