Restore non-wrapping mobile tabs and clamp help tooltip in viewport
This commit is contained in:
@@ -453,6 +453,7 @@
|
|||||||
wrap.dataset.align = 'left';
|
wrap.dataset.align = 'left';
|
||||||
wrap.dataset.open = String(nextState);
|
wrap.dataset.open = String(nextState);
|
||||||
button.setAttribute('aria-expanded', String(nextState));
|
button.setAttribute('aria-expanded', String(nextState));
|
||||||
|
panel.style.removeProperty('transform');
|
||||||
|
|
||||||
if (!nextState) {
|
if (!nextState) {
|
||||||
return;
|
return;
|
||||||
@@ -471,6 +472,20 @@
|
|||||||
if (alignedPanelRect.left < 0) {
|
if (alignedPanelRect.left < 0) {
|
||||||
wrap.dataset.align = 'left';
|
wrap.dataset.align = 'left';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const clampedRect = panel.getBoundingClientRect();
|
||||||
|
const safeInset = 8;
|
||||||
|
let shiftX = 0;
|
||||||
|
|
||||||
|
if (clampedRect.right > (viewportWidth - safeInset)) {
|
||||||
|
shiftX -= clampedRect.right - (viewportWidth - safeInset);
|
||||||
|
}
|
||||||
|
if ((clampedRect.left + shiftX) < safeInset) {
|
||||||
|
shiftX += safeInset - (clampedRect.left + shiftX);
|
||||||
|
}
|
||||||
|
if (shiftX !== 0) {
|
||||||
|
panel.style.transform = `translateX(${shiftX}px)`;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -488,7 +503,11 @@
|
|||||||
if (!event.target.closest('.sg-help-icon-wrap')) {
|
if (!event.target.closest('.sg-help-icon-wrap')) {
|
||||||
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
|
||||||
const button = wrap.querySelector('.sg-help-icon');
|
const button = wrap.querySelector('.sg-help-icon');
|
||||||
|
const panel = wrap.querySelector('.sg-help-icon-panel');
|
||||||
wrap.dataset.open = 'false';
|
wrap.dataset.open = 'false';
|
||||||
|
if (panel) {
|
||||||
|
panel.style.removeProperty('transform');
|
||||||
|
}
|
||||||
if (button) {
|
if (button) {
|
||||||
button.setAttribute('aria-expanded', 'false');
|
button.setAttribute('aria-expanded', 'false');
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -37,15 +37,8 @@
|
|||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
|
.sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] {
|
||||||
flex: 0 0 calc(
|
flex: 0 0 auto;
|
||||||
(
|
min-width: max-content;
|
||||||
100%
|
white-space: nowrap;
|
||||||
- (var(--spacing-small) * (var(--sg-tab-mobile-row-slots, 1) - 1))
|
|
||||||
)
|
|
||||||
/ var(--sg-tab-mobile-row-slots, 1)
|
|
||||||
);
|
|
||||||
min-width: 0;
|
|
||||||
white-space: normal;
|
|
||||||
overflow-wrap: anywhere;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user