From d9f80c994b1e4a5f739b3d7e79ec00ba8c789f11 Mon Sep 17 00:00:00 2001 From: Kouji Takao Date: Thu, 15 Jan 2026 00:54:54 +0900 Subject: [PATCH] feat: show whole shape of blocks when mouse over the flyout - Applied CSS patch to display the full shape of long Blockly blocks when hovering over the flyout palette. - Added RTL support and improved browser compatibility with -webkit-clip-path. - Adjust scrollbar opacity and margin for better usability during hover. Co-Authored-By: Gemini --- src/components/blocks/blocks.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/components/blocks/blocks.css b/src/components/blocks/blocks.css index 583f587f797..e4e0500a6a2 100644 --- a/src/components/blocks/blocks.css +++ b/src/components/blocks/blocks.css @@ -74,6 +74,30 @@ border-left: 1px solid $ui-black-transparent; } +.blocks :global(.blocklyFlyout:hover) { + overflow: visible; + clip-path: inset(0 -100vw 0 0); + -webkit-clip-path: inset(0 -100vw 0 0); +} + +[dir="rtl"] .blocks :global(.blocklyFlyout:hover) { + clip-path: inset(0 0 0 -100vw); + -webkit-clip-path: inset(0 0 0 -100vw); +} + +.blocks :global(.blocklyFlyout:hover .blocklyWorkspace) { + clip-path: none; + -webkit-clip-path: none; +} + +.blocks :global(.blocklyFlyout:hover .blocklyScrollbarBackground:hover) { + opacity: 0.4; +} + +.blocks :global(.blocklyFlyout .blocklyFlyoutScrollbar) { + margin-left: 4px; +} + .blocks :global(.blocklyBlockDragSurface) { /*