fix buttons position
This commit is contained in:
parent
584bc32ec5
commit
9f525231f9
1 changed files with 10 additions and 7 deletions
|
|
@ -83,7 +83,7 @@ function _ensureContainer() {
|
||||||
|
|
||||||
const toolbar = document.createElement('div');
|
const toolbar = document.createElement('div');
|
||||||
toolbar.id = 'mzta-toolbar';
|
toolbar.id = 'mzta-toolbar';
|
||||||
toolbar.style.cssText = `display: none; align-items: center; gap: 8px; padding: 6px 0.5rem; background-color: ${colors.toolbar.bg}; border-bottom: 1px solid ${colors.toolbar.border}; font-size: 13px; color: ${colors.toolbar.text};`;
|
toolbar.style.cssText = `display: none; align-items: flex-start; gap: 8px; padding: 6px 0.5rem; background-color: ${colors.toolbar.bg}; border-bottom: 1px solid ${colors.toolbar.border}; font-size: 13px; color: ${colors.toolbar.text};`;
|
||||||
container.appendChild(toolbar);
|
container.appendChild(toolbar);
|
||||||
|
|
||||||
const panels = document.createElement('div');
|
const panels = document.createElement('div');
|
||||||
|
|
@ -980,6 +980,7 @@ switch (message.command) {
|
||||||
|
|
||||||
chevron.onclick = (e) => {
|
chevron.onclick = (e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
_spamResizeObserver.disconnect();
|
||||||
badgeText.style.whiteSpace = 'normal';
|
badgeText.style.whiteSpace = 'normal';
|
||||||
badgeText.style.overflow = 'hidden';
|
badgeText.style.overflow = 'hidden';
|
||||||
badgeText.style.textOverflow = 'unset';
|
badgeText.style.textOverflow = 'unset';
|
||||||
|
|
@ -994,21 +995,23 @@ switch (message.command) {
|
||||||
|
|
||||||
_addToolbarItem('mzta-toolbar-spam', badge);
|
_addToolbarItem('mzta-toolbar-spam', badge);
|
||||||
|
|
||||||
// After render: if text fits, show branding+menu inline and hide chevron;
|
const _updateSpamVisibility = () => {
|
||||||
// if text is truncated, show chevron and keep branding+menu hidden.
|
if (badgeText.style.whiteSpace === 'normal') return; // already expanded, don't interfere
|
||||||
requestAnimationFrame(() => {
|
|
||||||
if (badgeText.scrollWidth > badgeText.clientWidth) {
|
if (badgeText.scrollWidth > badgeText.clientWidth) {
|
||||||
// Text is truncated: show chevron, keep branding+menu hidden
|
|
||||||
chevron.style.display = 'inline';
|
chevron.style.display = 'inline';
|
||||||
branding.style.display = 'none';
|
branding.style.display = 'none';
|
||||||
spamMenu.style.display = 'none';
|
spamMenu.style.display = 'none';
|
||||||
} else {
|
} else {
|
||||||
// Text fits: show branding+menu inline, hide chevron
|
|
||||||
chevron.style.display = 'none';
|
chevron.style.display = 'none';
|
||||||
branding.style.display = '';
|
branding.style.display = '';
|
||||||
spamMenu.style.display = '';
|
spamMenu.style.display = '';
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
|
|
||||||
|
requestAnimationFrame(_updateSpamVisibility);
|
||||||
|
|
||||||
|
const _spamResizeObserver = new ResizeObserver(_updateSpamVisibility);
|
||||||
|
_spamResizeObserver.observe(badge);
|
||||||
|
|
||||||
return Promise.resolve(true);
|
return Promise.resolve(true);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue