rajalakshmys-27 opened a new pull request, #3985: URL: https://github.com/apache/incubator-kie-tools/pull/3985
Closes : [kie-issues#2395](https://github.com/apache/incubator-kie-issues/issues/2395) Currently, the palette icons are fully visible only on larger screens (height ≥ 758px). Fix: Implemented a responsive submenu for the DMN editor palette that dynamically shows/hides icons based on available viewport space, improving usability on smaller screens (height ≥ 430px). **Submenu Strategy** The palette uses a flat list of 5 primary icons (`primaryIcons`), all eligible for submenu overflow: - Icons that fit in the available space remain visible in the palette. - Overflow icons are hidden behind an ellipsis button (`⋯`). - The secondary palette groups (Group, Text Annotation, DRG Nodes, External Nodes) always remain visible. **Changes Made** *Responsive Calculation* - Implemented `calculateVisibleIconCount()`. - Dynamically calculates how many icons fit in available viewport space *Responsive Behaviour* - Added window resize listener with `requestAnimationFrame` for smooth updates. *Submenu UI* - Ellipsis button (`⋯`) appears when icons overflow. - Grid-based submenu displays hidden icons. - Submenu only shown when `visibleIconCount < totalIcons` (derived, no extra state). - `renderPaletteIcon` callback eliminates icon rendering duplication. **Testing** - Verified responsive behaviour across different viewport sizes. - Submenu opens/closes correctly. - All icons remain draggable from both palette and submenu. <img width="1053" height="480" alt="image" src="https://github.com/user-attachments/assets/b7d17a7d-4e1f-41ad-aaf9-b811f72c0040"; /> -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
