[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,7 +61,6 @@ const Toolbar = memo(function Toolbar() {
       setOverflowOpen(false)
       setOverflowed(true)
 
-      if (overflowBeforeRef.current) {
       overflowedItemsRef.current = new Set()
 
       const buttonGroups = [
@@ -85,7 +83,6 @@ const Toolbar = memo(function Toolbar() {
       }
 
       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}