Skip to content

MWPW-192327 Fix color popover appearing under nav #372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
meganthecoder merged 1 commit into from
Apr 17, 2026
Merged

MWPW-192327 Fix color popover appearing under nav #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion express/code/libs/color-components/components/color-swatch-rail/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1324,7 +1324,7 @@ export class ColorSwatchRail extends LitElement {
const stackedContent = html`
<div class="bottom-info bottom-info--stacked" part="bottom-info">
${showEdit ? html`<input type="color" id="edit-input-${index}" class="edit-input-native" tabindex="-1" aria-hidden="true" value=${swatch.hex} @input=${(ev) => this._onNativePickerChange(index, ev)} @change=${() => this._markNativePickerClosedSoon(50)} @blur=${() => this._markNativePickerClosedSoon(50)} />` : ''}
${f.hexCode ? ((showEdit || f.copyFromHex) ? html`<button type="button" class="hex-code hex-code--${showEdit ? 'editable' : 'copyable'} swatch-column-focusable" tabindex="-1" @click=${showEdit ? (ev) => this._handleColorPicker(index, ev.currentTarget) : (ev) => this._handleCopy(swatch.hex, ev.currentTarget)} aria-label=${showEdit ? 'Edit color' : 'Copy hex'} title=${showEdit ? 'Edit color' : 'Copy hex'}>${swatch.hex}</button>` : html`<span class="hex-code hex-code--static">${swatch.hex}</span>`) : ''}
${f.hexCode ? ((showEdit || f.copyFromHex) ? html`<button type="button" class="hex-code hex-code--${showEdit ? 'editable' : 'copyable'} swatch-column-focusable${this._activeEditIndex === index ? ' hex-code--editor-open' : ''}" tabindex="-1" @click=${showEdit ? (ev) => this._handleColorPicker(index, ev.currentTarget) : (ev) => this._handleCopy(swatch.hex, ev.currentTarget)} aria-label=${showEdit ? 'Edit color' : 'Copy hex'} title=${showEdit ? 'Edit color' : 'Copy hex'}>${swatch.hex}</button>` : html`<span class="hex-code hex-code--static">${swatch.hex}</span>`) : ''}
</div>
${stackedIcons}
`;
Expand Down
22 changes: 15 additions & 7 deletions express/code/libs/color-components/components/color-swatch-rail/styles.css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1021,11 +1021,17 @@ export const style = css`
height: 32px;
border-radius: var(--Corner-radius-corner-radius-100);
}
.swatch-column[data-contrast="dark"] button.hex-code:hover,
@media (hover: hover) {
.swatch-column[data-contrast="dark"] button.hex-code:hover {
background-color: rgba(255, 255, 255, 0.12);
}
.swatch-column[data-contrast="light"] button.hex-code:hover {
background-color: rgba(0, 0, 0, 0.12);
}
}
.swatch-column[data-contrast="dark"] button.hex-code.hex-code--editor-open {
background-color: rgba(255, 255, 255, 0.12);
}
.swatch-column[data-contrast="light"] button.hex-code:hover,
.swatch-column[data-contrast="light"] button.hex-code.hex-code--editor-open {
background-color: rgba(0, 0, 0, 0.12);
}
Expand Down Expand Up @@ -1063,11 +1069,13 @@ export const style = css`



.swatch-column[data-contrast="dark"] .icon-button:hover {
background-color: rgba(255, 255, 255, 0.12);
}
.swatch-column[data-contrast="light"] .icon-button:hover {
background-color: rgba(0, 0, 0, 0.12);
@media (hover: hover) {
.swatch-column[data-contrast="dark"] .icon-button:hover {
background-color: rgba(255, 255, 255, 0.12);
}
.swatch-column[data-contrast="light"] .icon-button:hover {
background-color: rgba(0, 0, 0, 0.12);
}
}


Expand Down
22 changes: 18 additions & 4 deletions express/code/scripts/color-shared/renderers/createStripContainerRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -576,15 +576,29 @@ export function createStripContainerRenderer(options) {
return anchorElement.getBoundingClientRect();
}

function getStickyHeaderBottom() {
const selectors = ['header.global-navigation', '.feds-localnav'];
return selectors.reduce((max, sel) => {
const el = document.querySelector(sel);
if (!el) return max;
return Math.max(max, el.getBoundingClientRect().bottom);
}, 0);
}

function positionPopover(popover, anchorRect, container) {
const gap = 4;
const popRect = popover.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();

let viewportTop = anchorRect.bottom + gap;
if (viewportTop + popRect.height > window.innerHeight) {
viewportTop = anchorRect.top - popRect.height - gap;
}
const belowTop = anchorRect.bottom + gap;
const aboveTop = anchorRect.top - popRect.height - gap;
const headerBottom = getStickyHeaderBottom();

const fitsBelow = belowTop + popRect.height <= window.innerHeight;
const fitsAbove = aboveTop >= headerBottom;

let viewportTop = belowTop;
if (!fitsBelow && fitsAbove) viewportTop = aboveTop;

let viewportLeft = anchorRect.left;
if (viewportLeft + popRect.width > window.innerWidth - gap) {
Expand Down
Loading