diff --git a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx index 23b4ff1e26..1f9d1e2e9d 100644 --- a/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx +++ b/services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx @@ -43,7 +43,6 @@ const Toolbar = memo(function Toolbar() { const [overflowed, setOverflowed] = useState(false) const [collapsed, setCollapsed] = useState(false) - const overflowBeforeRef = useRef(null) const overflowedItemsRef = useRef>(new Set()) const languageName = state.facet(language)?.name @@ -62,30 +61,28 @@ const Toolbar = memo(function Toolbar() { setOverflowOpen(false) setOverflowed(true) - if (overflowBeforeRef.current) { - overflowedItemsRef.current = new Set() + overflowedItemsRef.current = new Set() - const buttonGroups = [ - ...element.querySelectorAll('[data-overflow]'), - ].reverse() + const buttonGroups = [ + ...element.querySelectorAll('[data-overflow]'), + ].reverse() - // restore all the overflowed items - for (const buttonGroup of buttonGroups) { - buttonGroup.classList.remove('overflow-hidden') - } - - // find all the available items - for (const buttonGroup of buttonGroups) { - if (element.scrollWidth <= element.clientWidth) { - break - } - // add this item to the overflow - overflowedItemsRef.current.add(buttonGroup.dataset.overflow!) - buttonGroup.classList.add('overflow-hidden') - } - - setOverflowed(overflowedItemsRef.current.size > 0) + // restore all the overflowed items + for (const buttonGroup of buttonGroups) { + buttonGroup.classList.remove('overflow-hidden') } + + // find all the available items + for (const buttonGroup of buttonGroups) { + if (element.scrollWidth <= element.clientWidth) { + break + } + // add this item to the overflow + overflowedItemsRef.current.add(buttonGroup.dataset.overflow!) + buttonGroup.classList.add('overflow-hidden') + } + + setOverflowed(overflowedItemsRef.current.size > 0) }, [setOverflowOpen] ) @@ -117,13 +114,9 @@ const Toolbar = memo(function Toolbar() { visual={visual} listDepth={listDepth} /> -
+
void overflowRef?: LegacyRef -}> = ({ - overflowed, - target, - overflowOpen, - setOverflowOpen, - overflowRef, - children, -}) => { +}> = ({ overflowed, overflowOpen, setOverflowOpen, overflowRef, children }) => { + const buttonRef = useRef