Fix selection highlight getting clipped when flush against a container edge

The positive outline-offset from the previous fix pushed the highlight
outside the element's own box — which gets clipped by the first
overflow:hidden ancestor (the canvas itself, or a rounded-corner
container) on whichever sides touch that ancestor's edge. A row of
gauges flush against the top/left of its container showed only a
stray line on the untouched side instead of a full frame.

Switch to an inset box-shadow: it always stays inside the element's own
box, so it can never be clipped by an ancestor, and it naturally follows
the element's own border-radius.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-08-23 20:53:48 +02:00
co-authored by Claude Sonnet 5
parent 3228460f1c
commit 2b2619d1c4
+8 -3
View File
@@ -148,10 +148,15 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
sa propre balise (voir applySelectionHighlight) — seul moyen de la voir
sur le canevas quand cet élément est imbriqué dans un conteneur/répéteur/
groupe de champs, qui n'a pas de cadre ".canvasElement" séparé comme un
élément posé directement sur l'écran. */
élément posé directement sur l'écran. Un "outline" qui dépasse la boîte
(offset positif) se fait couper par le premier ancêtre en overflow:hidden
(le canevas lui-même, ou un conteneur aux coins arrondis) dès que
l'élément touche un de ses bords — très fréquent pour une rangée de
jauges collée en haut d'un conteneur. Un box-shadow EN CREUX (inset)
reste toujours à l'intérieur de la boîte, jamais rogné, et épouse
naturellement les coins arrondis de l'élément lui-même. */
.elementHighlighted{
outline:2px solid var(--accent); outline-offset:3px; border-radius:3px;
box-shadow:0 0 0 5px rgba(91,140,255,.15);
box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 6px rgba(91,140,255,.2);
}
.resizeHandle{
position:absolute; right:0; bottom:0; width:14px; height:14px; cursor:nwse-resize;