diff --git a/frontend/editor/src/core/components/tools/shared/ReviewToolStep.tsx b/frontend/editor/src/core/components/tools/shared/ReviewToolStep.tsx index ef596c2a0d..8f86faff17 100644 --- a/frontend/editor/src/core/components/tools/shared/ReviewToolStep.tsx +++ b/frontend/editor/src/core/components/tools/shared/ReviewToolStep.tsx @@ -14,6 +14,25 @@ import { saveOperationResults } from "@app/services/operationResultsSaveService" import { useFileActions, useFileSelectors } from "@app/contexts/FileContext"; import i18n from "@app/i18n"; +/** + * Nearest scrolling ancestor - in the right rail that is the tool panel's + * ScrollArea viewport, whose overflow is `scroll`, not `auto`. + */ +function findScrollParent(element: HTMLElement): HTMLElement | null { + let node = element.parentElement; + while (node) { + const { overflowY } = getComputedStyle(node); + if ( + /(auto|scroll|overlay)/.test(overflowY) && + node.scrollHeight > node.clientHeight + ) { + return node; + } + node = node.parentElement; + } + return null; +} + export interface ReviewToolStepProps { isVisible: boolean; operation: ToolOperationHook; @@ -81,26 +100,37 @@ function ReviewStepContent({ } }; - // Auto-scroll to bottom when content appears + // Reveal the results when they appear, or the download button lands below the + // fold behind a tall settings step and reads as missing. useEffect(() => { - if ( - stepRef.current && - (previewFiles.length > 0 || - operation.downloadUrl || - operation.errorMessage) - ) { - const scrollableContainer = stepRef.current.closest( - '[style*="overflow: auto"]', - ) as HTMLElement; - if (scrollableContainer) { - setTimeout(() => { - scrollableContainer.scrollTo({ - top: scrollableContainer.scrollHeight, - behavior: "smooth", - }); - }, 100); // Small delay to ensure content is rendered + const hasContent = + previewFiles.length > 0 || + operation.downloadUrl || + operation.errorMessage; + if (!stepRef.current || !hasContent) return; + + // Small delay so the step has been laid out before it is measured. + const timer = setTimeout(() => { + const step = stepRef.current; + const scroller = step && findScrollParent(step); + if (!step || !scroller) return; + + const stepRect = step.getBoundingClientRect(); + const viewRect = scroller.getBoundingClientRect(); + // Move the least that brings the step into view, and only ever the panel + // itself - scrollIntoView() drags every ancestor and unpins the header. + const delta = Math.min( + stepRect.top - viewRect.top, + stepRect.bottom - viewRect.bottom, + ); + if (delta > 1) { + scroller.scrollTo({ + top: scroller.scrollTop + delta, + behavior: "smooth", + }); } - } + }, 100); + return () => clearTimeout(timer); }, [previewFiles.length, operation.downloadUrl, operation.errorMessage]); return ( diff --git a/frontend/editor/src/core/components/tools/shared/createToolFlow.module.css b/frontend/editor/src/core/components/tools/shared/createToolFlow.module.css new file mode 100644 index 0000000000..bc7abb630d --- /dev/null +++ b/frontend/editor/src/core/components/tools/shared/createToolFlow.module.css @@ -0,0 +1,22 @@ +/* The tool panel scrolls as a single column, so a tall settings step (PDF/UA is + the worst offender) pushes the primary action below the fold with nothing to + say it is there. Pinning keeps it reachable; when the flow already fits, + sticky is inert and nothing moves. */ +.executeFooter { + position: sticky; + bottom: 0; + z-index: 2; + background: var(--c-surface, var(--mantine-color-body)); + display: flex; + flex-direction: column; + gap: var(--mantine-spacing-sm); + /* Bleed across the flow's own padding so content cannot scroll through the + gutters beside the button. The margin cancels the padding, so an unpinned + footer still sits exactly where it did. */ + margin-inline: calc(var(--mantine-spacing-sm) * -1); + padding-inline: var(--mantine-spacing-sm); + /* Paint-only skirt covering the strip below the button once pinned; a padding + here would change the resting layout. */ + box-shadow: 0 var(--mantine-spacing-sm) 0 0 + var(--c-surface, var(--mantine-color-body)); +} diff --git a/frontend/editor/src/core/components/tools/shared/createToolFlow.tsx b/frontend/editor/src/core/components/tools/shared/createToolFlow.tsx index aafa9b3ea1..4b03de0a4b 100644 --- a/frontend/editor/src/core/components/tools/shared/createToolFlow.tsx +++ b/frontend/editor/src/core/components/tools/shared/createToolFlow.tsx @@ -13,6 +13,7 @@ import { import { StirlingFile } from "@app/types/fileContext"; import type { TooltipTip } from "@app/types/tips"; import type { ExecuteDisabledReason } from "@app/hooks/tools/shared/toolOperationTypes"; +import classes from "@app/components/tools/shared/createToolFlow.module.css"; export interface FilesStepConfig { selectedFiles: StirlingFile[]; @@ -152,8 +153,14 @@ export function createToolFlow( : eb.paramsValid === false ? "invalidParams" : null; + // Pin the action only while it is the last thing in the flow; with a + // review below it, a sticky footer would float over the results. return ( - <> +
( data-tour="run-button" /> {config.belowExecuteButton} - +
); })()} diff --git a/frontend/editor/src/core/tools/Convert.tsx b/frontend/editor/src/core/tools/Convert.tsx index eb9a4a02c5..733a21b6e4 100644 --- a/frontend/editor/src/core/tools/Convert.tsx +++ b/frontend/editor/src/core/tools/Convert.tsx @@ -36,7 +36,6 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { }); setSelectedFiles(matching.map((file) => file.fileId)); }; - const scrollContainerRef = useRef(null); const convertParams = useConvertParameters(); const convertOperation = useConvertOperation(convertParams.parameters); @@ -48,16 +47,6 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { const skipNextSelectionResetRef = useRef(false); const previousSelectionRef = useRef(""); - const scrollToBottom = () => { - if (scrollContainerRef.current) { - scrollContainerRef.current.scrollTo({ - top: scrollContainerRef.current.scrollHeight, - behavior: "smooth", - }); - } - }; - - const hasFiles = selectedFiles.length > 0; const hasResults = convertOperation.files.length > 0 || convertOperation.downloadUrl !== null || @@ -115,18 +104,6 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { convertParams.parameters.toExtension, ]); - useEffect(() => { - if (hasFiles) { - setTimeout(scrollToBottom, 100); - } - }, [hasFiles]); - - useEffect(() => { - if (hasResults) { - setTimeout(scrollToBottom, 100); - } - }, [hasResults]); - const handleConvert = async () => { try { await convertOperation.executeOperation(