Calculate overflow when `languageName` or `visual` change (#13872)

GitOrigin-RevId: f2d200d0d34e810688defe78b8143829f095df9f

services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-raw-content.js

@@ -13,7 +13,7 @@ export default function PdfLogEntryRawContent({
   const [expanded, setExpanded] = useState(false)
   const [needsExpander, setNeedsExpander] = useState(false)
 
-  const containerRef = useResizeObserver(element => {
+  const { elementRef } = useResizeObserver(element => {
     setNeedsExpander(element.scrollHeight > collapsedSize)
   })
 
@@ -27,7 +27,7 @@ export default function PdfLogEntryRawContent({
           height: expanded || !needsExpander ? 'auto' : collapsedSize,
         }}
       >
-        <pre className="log-entry-content-raw" ref={containerRef}>
+        <pre className="log-entry-content-raw" ref={elementRef}>
           {rawContent.trim()}
         </pre>
       </div>

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

@@ -1,4 +1,4 @@
-import { memo, useCallback, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import {
   useCodeMirrorStateContext,
@@ -87,8 +87,15 @@ const Toolbar = memo(function Toolbar() {
     [setOverflowOpen]
   )
 
-  // build when the container resizes
-  const resizeRef = useResizeObserver(buildOverflow)
+  // calculate overflow when the container resizes
+  const { elementRef, resizeRef } = useResizeObserver(buildOverflow)
+
+  // calculate overflow when `languageName` or `visual` change
+  useEffect(() => {
+    if (resizeRef.current) {
+      buildOverflow(resizeRef.current.element)
+    }
+  }, [buildOverflow, languageName, resizeRef, visual])
 
   const toggleToolbar = useCallback(() => {
     setCollapsed(value => !value)
@@ -99,7 +106,7 @@ const Toolbar = memo(function Toolbar() {
   }
 
   return (
-    <div className="ol-cm-toolbar toolbar-editor" ref={resizeRef}>
+    <div className="ol-cm-toolbar toolbar-editor" ref={elementRef}>
       {showSourceToolbar && <EditorSwitch />}
       <ToolbarItems state={state} languageName={languageName} visual={visual} />
       <div

services/web/frontend/js/shared/hooks/use-resize-observer.ts

@@ -35,5 +35,5 @@ export const useResizeObserver = (handleResize: (element: Element) => void) => {
     }
   }, [])
 
-  return elementRef
+  return { elementRef, resizeRef }
 }