From 06fd739bb80d8ba4f0d0f3f054c6ee46489a47b0 Mon Sep 17 00:00:00 2001 From: YamadaBlog Date: Fri, 12 Jun 2026 16:47:39 +0200 Subject: [PATCH] fix(demo): clamp corner-resize to its stage at every breakpoint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User report : resize/drag stages 'depassent de la page'. Reproduced on a 768px tablet : dragging the corner grip pushed the player to its 720px ceiling regardless of container — +20px past the stage card, +10px past the viewport (worse on narrower tablets). The lib chrome is container-aware (ResizeObserver), so a CSS max-width cleanly caps the inline width the drag writes ; the old clamp only covered <=720px viewports. Verified by scripted grip-drags at 390/768/1500 : tablet 720 -> 622 (inside the stage), zero page overflow anywhere, chrome intact at max size (screenshot). Co-Authored-By: Claude Fable 5 --- src/styles/responsive-fix.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/styles/responsive-fix.css b/src/styles/responsive-fix.css index 791339d..6d73140 100644 --- a/src/styles/responsive-fix.css +++ b/src/styles/responsive-fix.css @@ -754,3 +754,19 @@ body, scroll-behavior: smooth; } } + +/* ═══════════════════════════════════════════════════════════════════ + Round-24 user report — "resize-stage / drag-stage ne sont pas + responsive et dépassent de la page". + Reproduced : dragging the corner grip pushed the player to its + 720 px ceiling REGARDLESS of the stage width — on a 768 px tablet + that is +20 px past the stage card and +10 px past the viewport. + The lib is container-aware (ResizeObserver-driven chrome), so a CSS + max-width cleanly caps the inline width the drag writes : the box + clamps, the chrome follows, every breakpoint stays inside its + stage. Applies at ALL widths (the old clamp only covered ≤720 px). + ═══════════════════════════════════════════════════════════════════ */ +.drag-stage .mp, +.resize-stage .mp { + max-width: 100% !important; +}