[cm6] fix toolbar overflow menu alignment (#13873)

GitOrigin-RevId: a70cf3fa37d49b9ed52fea4b928d52ffc2dbf136

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<HTMLDivElement>(null)
   const overflowedItemsRef = useRef<Set<string>>(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<HTMLDivElement>('[data-overflow]'),
-        ].reverse()
+      const buttonGroups = [
+        ...element.querySelectorAll<HTMLDivElement>('[data-overflow]'),
+      ].reverse()
 
-        // restore all the overflowed items
-        for (const buttonGroup of buttonGroups) {
-          buttonGroup.classList.remove('overflow-hidden')
-        }
+      // 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')
+      // find all the available items
+      for (const buttonGroup of buttonGroups) {
+        if (element.scrollWidth <= element.clientWidth) {
+          break
         }
-
-        setOverflowed(overflowedItemsRef.current.size > 0)
+        // 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}
       />
-      <div
-        className="ol-cm-toolbar-button-group ol-cm-toolbar-stretch"
-        ref={overflowBeforeRef}
-      >
+      <div className="ol-cm-toolbar-button-group ol-cm-toolbar-stretch">
         <ToolbarOverflow
           overflowed={overflowed}
-          target={overflowBeforeRef.current ?? undefined}
           overflowOpen={overflowOpen}
           setOverflowOpen={setOverflowOpen}
           overflowRef={overflowRef}

services/web/frontend/js/features/source-editor/components/toolbar/overflow.tsx

@@ -1,4 +1,4 @@
-import { FC, LegacyRef } from 'react'
+import { FC, LegacyRef, useRef } from 'react'
 import { Button, Overlay, Popover } from 'react-bootstrap'
 import classnames from 'classnames'
 import Icon from '../../../../shared/components/icon'
@@ -6,18 +6,11 @@ import { useCodeMirrorViewContext } from '../codemirror-editor'
 
 export const ToolbarOverflow: FC<{
   overflowed: boolean
-  target?: HTMLDivElement
   overflowOpen: boolean
   setOverflowOpen: (open: boolean) => void
   overflowRef?: LegacyRef<Popover>
-}> = ({
-  overflowed,
-  target,
-  overflowOpen,
-  setOverflowOpen,
-  overflowRef,
-  children,
-}) => {
+}> = ({ overflowed, overflowOpen, setOverflowOpen, overflowRef, children }) => {
+  const buttonRef = useRef<Button>(null)
   const view = useCodeMirrorViewContext()
 
   const className = classnames(
@@ -31,6 +24,7 @@ export const ToolbarOverflow: FC<{
   return (
     <>
       <Button
+        ref={buttonRef}
         type="button"
         id="toolbar-more"
         className={className}
@@ -49,7 +43,7 @@ export const ToolbarOverflow: FC<{
 
       <Overlay
         show={overflowOpen}
-        target={target}
+        target={buttonRef.current ?? undefined}
         placement="bottom"
         container={view.dom}
         containerPadding={0}