From 2b2619d1c4379b7ee18e21a5ef2d4d2b189f3d39 Mon Sep 17 00:00:00 2001 From: william Date: Sun, 23 Aug 2026 20:53:48 +0200 Subject: [PATCH] Fix selection highlight getting clipped when flush against a container edge MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- static/style.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/static/style.css b/static/style.css index 8fa7fb6a..bd06d6bb 100644 --- a/static/style.css +++ b/static/style.css @@ -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;