diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-raw-content.js b/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-raw-content.js index 347e7f48ff..d1457d5586 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-raw-content.js +++ b/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, }} > -
+        
           {rawContent.trim()}
         
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 b6090141f2..8fe6123e5c 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 @@ -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 ( -
+
{showSourceToolbar && }
void) => { } }, []) - return elementRef + return { elementRef, resizeRef } }