Merge layout findings into existing overlays instead of stacking

When an element already has an overlay from per-element checks (e.g.
side-tab), layout findings (e.g. nested-cards) now merge into the
same overlay label instead of creating a duplicate stacked on top.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-03-28 16:21:25 -07:00
co-authored by Claude Opus 4.6
parent 3818073268
commit fda447ee8b
2 changed files with 26 additions and 2 deletions
@@ -1454,7 +1454,19 @@ if (IS_BROWSER) {
for (const f of layoutFindings) {
const el = f.el || document.body;
delete f.el;
highlight(el, [f]);
// Merge into existing overlay if this element already has one
const existing = el._impeccableOverlay;
if (existing) {
const label = existing.querySelector('.impeccable-label');
if (label) {
const newType = TYPE_LABELS[f.type] || f.type;
label.textContent += ', ' + newType;
}
const tooltip = existing.querySelector('.impeccable-tooltip');
if (tooltip) tooltip.innerHTML += '<br>' + (f.detail || '');
} else {
highlight(el, [f]);
}
allFindings.push({ el, findings: [f] });
}
@@ -1452,7 +1452,19 @@ if (IS_BROWSER) {
for (const f of layoutFindings) {
const el = f.el || document.body;
delete f.el;
highlight(el, [f]);
// Merge into existing overlay if this element already has one
const existing = el._impeccableOverlay;
if (existing) {
const label = existing.querySelector('.impeccable-label');
if (label) {
const newType = TYPE_LABELS[f.type] || f.type;
label.textContent += ', ' + newType;
}
const tooltip = existing.querySelector('.impeccable-tooltip');
if (tooltip) tooltip.innerHTML += '<br>' + (f.detail || '');
} else {
highlight(el, [f]);
}
allFindings.push({ el, findings: [f] });
}