react-diff-viewer-continued 4.1.0 → 4.1.1

package/.claude/settings.local.json

@@ -8,7 +8,12 @@
       "Bash(pnpm test:*)",
       "Bash(CI=1 pnpm test:*)",
       "Bash(CI=1 npm test:*)",
-      "Bash(pnpm remove:*)"
+      "Bash(pnpm remove:*)",
+      "Bash(npm test:*)",
+      "Bash(npx tsc:*)",
+      "Bash(ls:*)",
+      "Bash(pnpm run build:*)",
+      "Bash(pnpm exec vitest:*)"
     ],
     "deny": [],
     "ask": []

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.1.1 (2026-02-07)
+
+### Bug Fixes
+
+- fix problem with missing worker in compiled version
+
 ## 4.1.0 (2026-02-04)
 
 ### Features

package/lib/cjs/src/compute-lines.js

@@ -490,19 +490,29 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
  * @returns Promise<ComputedLineInformation> - Resolves with line-by-line diff data from the worker.
  */
 const computeLineInformationWorker = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = [], deferWordDiff = false) => {
+    const fallback = () => computeLineInformation(oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff);
     // Fall back to synchronous computation if Worker is not available (e.g., in Node.js/test environments)
     if (typeof Worker === 'undefined') {
-        return Promise.resolve(computeLineInformation(oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff));
+        return Promise.resolve(fallback());
     }
-    return new Promise((resolve, reject) => {
-        const worker = new Worker(new URL('./computeWorker.ts', import.meta.url), { type: 'module' });
+    return new Promise((resolve) => {
+        let worker;
+        try {
+            worker = new Worker(new URL('./computeWorker.js', import.meta.url), { type: 'module' });
+        }
+        catch (_a) {
+            // Worker instantiation failed - fall back to synchronous computation
+            resolve(fallback());
+            return;
+        }
         worker.onmessage = (e) => {
             resolve(e.data);
             worker.terminate();
         };
-        worker.onerror = (err) => {
-            reject(err);
+        worker.onerror = () => {
+            // Worker error - fall back to synchronous computation
             worker.terminate();
+            resolve(fallback());
         };
         worker.postMessage({ oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff });
     });

package/lib/cjs/src/index.d.ts

@@ -65,6 +65,10 @@ export interface ReactDiffViewerProps {
      * Hide the summary bar (expand/collapse button, change count, filename)
      */
     hideSummary?: boolean;
+    /**
+     * Show debug overlay with virtualization info (for development)
+     */
+    showDebugInfo?: boolean;
 }
 export interface ReactDiffViewerState {
     expandedBlocks?: number[];
@@ -73,10 +77,17 @@ export interface ReactDiffViewerState {
     computedDiffResult: Record<string, ComputedDiffResult>;
     isLoading: boolean;
     visibleStartRow: number;
+    contentColumnWidth: number | null;
+    charWidth: number | null;
+    cumulativeOffsets: number[] | null;
 }
 declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
     private styles;
     private wordDiffCache;
+    private contentColumnRef;
+    private charMeasureRef;
+    private stickyHeaderRef;
+    private resizeObserver;
     static defaultProps: ReactDiffViewerProps;
     constructor(props: ReactDiffViewerProps);
     /**
@@ -94,6 +105,38 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
      * this value is used to expand/fold unmodified code.
      */
     private onBlockExpand;
+    /**
+     * Gets the height of the sticky header, if present.
+     */
+    private getStickyHeaderHeight;
+    /**
+     * Measures the width of a single character in the monospace font.
+     * Falls back to 7.2px if measurement fails.
+     */
+    private measureCharWidth;
+    /**
+     * Measures the available width for content in a content column.
+     * Falls back to estimating from container width if direct measurement fails.
+     */
+    private measureContentColumnWidth;
+    /**
+     * Gets the text length from a value that may be a string or DiffInformation array.
+     */
+    private getTextLength;
+    /**
+     * Builds cumulative vertical offsets for each line based on character count and column width.
+     * This allows accurate scroll position calculations with variable row heights.
+     */
+    private buildCumulativeOffsets;
+    /**
+     * Binary search to find the line index at a given scroll offset.
+     */
+    private findLineAtOffset;
+    /**
+     * Recalculates cumulative offsets based on current measurements.
+     * Called on resize and when blocks are expanded/collapsed.
+     */
+    private recalculateOffsets;
     /**
      * Computes final styles for the diff viewer. It combines the default styles with the user
      * supplied overrides. The computed styles are cached with performance in mind.
@@ -200,6 +243,7 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
     private renderDiff;
     componentDidUpdate(prevProps: ReactDiffViewerProps): void;
     componentDidMount(): void;
+    componentWillUnmount(): void;
     render: () => ReactElement;
 }
 export default DiffViewer;

package/lib/cjs/src/index.js

@@ -161,6 +161,11 @@ class DiffViewer extends React.Component {
         super(props);
         // Cache for on-demand word diff computation
         this.wordDiffCache = new Map();
+        // Refs for measuring content column width and character width
+        this.contentColumnRef = React.createRef();
+        this.charMeasureRef = React.createRef();
+        this.stickyHeaderRef = React.createRef();
+        this.resizeObserver = null;
         /**
          * Computes word diff on-demand for a line, with caching.
          * This is used when word diff was deferred during initial computation.
@@ -211,8 +216,28 @@ class DiffViewer extends React.Component {
         this.onBlockExpand = (id) => {
             const prevState = this.state.expandedBlocks.slice();
             prevState.push(id);
-            this.setState({
-                expandedBlocks: prevState,
+            this.setState({ expandedBlocks: prevState }, () => this.recalculateOffsets());
+        };
+        /**
+         * Recalculates cumulative offsets based on current measurements.
+         * Called on resize and when blocks are expanded/collapsed.
+         */
+        this.recalculateOffsets = () => {
+            var _a;
+            if (!this.props.infiniteLoading)
+                return;
+            const columnWidth = this.measureContentColumnWidth();
+            const charWidth = this.measureCharWidth();
+            if (!columnWidth)
+                return;
+            const cacheKey = this.getMemoisedKey();
+            const { lineInformation, lineBlocks, blocks } = (_a = this.state.computedDiffResult[cacheKey]) !== null && _a !== void 0 ? _a : {};
+            if (!lineInformation)
+                return;
+            const offsets = this.buildCumulativeOffsets(lineInformation, lineBlocks, blocks, this.state.expandedBlocks, this.props.showDiffOnly, charWidth, columnWidth, this.props.splitView);
+            this.setState({ cumulativeOffsets: offsets, contentColumnWidth: columnWidth, charWidth }, () => {
+                // Force a scroll position update to recalculate visible rows with new offsets
+                this.onScroll();
             });
         };
         /**
@@ -379,7 +404,7 @@ class DiffViewer extends React.Component {
                             [this.styles.diffRemoved]: removed,
                             [this.styles.diffChanged]: changed,
                             [this.styles.highlightedLine]: highlightLine,
-                        }), children: _jsxs("pre", { children: [added && "+", removed && "-"] }) }), _jsx("td", { className: cn(this.styles.content, {
+                        }), children: _jsxs("pre", { children: [added && "+", removed && "-"] }) }), _jsx("td", { ref: prefix === LineNumberPrefix.LEFT && !this.state.cumulativeOffsets ? this.contentColumnRef : undefined, className: cn(this.styles.content, {
                             [this.styles.emptyLine]: !content,
                             [this.styles.diffAdded]: added,
                             [this.styles.diffRemoved]: removed,
@@ -517,7 +542,13 @@ class DiffViewer extends React.Component {
                 : Math.round(this.props.extraLinesSurroundingDiff);
             const { lineBlocks, blocks } = computeHiddenBlocks(lineInformation, diffLines, extraLines);
             this.state.computedDiffResult[cacheKey] = { lineInformation, lineBlocks, blocks };
-            this.setState((prev) => (Object.assign(Object.assign({}, prev), { computedDiffResult: this.state.computedDiffResult, isLoading: false })));
+            this.setState((prev) => (Object.assign(Object.assign({}, prev), { computedDiffResult: this.state.computedDiffResult, isLoading: false })), () => {
+                // Trigger offset recalculation after diff is computed and rendered
+                // Use requestAnimationFrame to ensure DOM is ready for measurement
+                if (this.props.infiniteLoading) {
+                    requestAnimationFrame(() => this.recalculateOffsets());
+                }
+            });
         });
         /**
          * Handles scroll events on the scrollable container.
@@ -528,7 +559,13 @@ class DiffViewer extends React.Component {
             const container = this.state.scrollableContainerRef.current;
             if (!container || !this.props.infiniteLoading)
                 return;
-            const newStartRow = Math.floor(container.scrollTop / DiffViewer.ESTIMATED_ROW_HEIGHT);
+            // Account for sticky header height in scroll calculations
+            const headerHeight = this.getStickyHeaderHeight();
+            const contentScrollTop = Math.max(0, container.scrollTop - headerHeight);
+            const { cumulativeOffsets } = this.state;
+            const newStartRow = cumulativeOffsets
+                ? this.findLineAtOffset(contentScrollTop, cumulativeOffsets)
+                : Math.floor(contentScrollTop / DiffViewer.ESTIMATED_ROW_HEIGHT);
             // Only update state if the start row changed (avoid unnecessary re-renders)
             if (newStartRow !== this.state.visibleStartRow) {
                 this.setState({ visibleStartRow: newStartRow });
@@ -538,9 +575,9 @@ class DiffViewer extends React.Component {
          * Generates the entire diff view with virtualization support.
          */
         this.renderDiff = () => {
-            var _a;
+            var _a, _b, _c, _d, _e, _f;
             const { splitView, infiniteLoading, showDiffOnly } = this.props;
-            const { computedDiffResult, expandedBlocks, visibleStartRow, scrollableContainerRef } = this.state;
+            const { computedDiffResult, expandedBlocks, visibleStartRow, scrollableContainerRef, cumulativeOffsets } = this.state;
             const cacheKey = this.getMemoisedKey();
             const { lineInformation = [], lineBlocks = [], blocks = [] } = (_a = computedDiffResult[cacheKey]) !== null && _a !== void 0 ? _a : {};
             // Calculate visible range for virtualization
@@ -549,9 +586,32 @@ class DiffViewer extends React.Component {
             const buffer = 5; // render extra rows above/below viewport
             if (infiniteLoading && scrollableContainerRef.current) {
                 const container = scrollableContainerRef.current;
-                const viewportRows = Math.ceil(container.clientHeight / DiffViewer.ESTIMATED_ROW_HEIGHT);
-                visibleRowStart = Math.max(0, visibleStartRow - buffer);
-                visibleRowEnd = visibleStartRow + viewportRows + buffer;
+                // Account for sticky header height in scroll calculations
+                const headerHeight = this.getStickyHeaderHeight();
+                const contentScrollTop = Math.max(0, container.scrollTop - headerHeight);
+                if (cumulativeOffsets) {
+                    // Variable height mode: use binary search to find visible range
+                    const totalHeight = cumulativeOffsets[cumulativeOffsets.length - 1] || 0;
+                    const lastRowIndex = cumulativeOffsets.length - 2;
+                    visibleRowStart = Math.max(0, this.findLineAtOffset(contentScrollTop, cumulativeOffsets) - buffer);
+                    visibleRowEnd = this.findLineAtOffset(contentScrollTop + container.clientHeight, cumulativeOffsets) + buffer;
+                    // IMPORTANT: The calculated offsets may overestimate row heights (based on char count),
+                    // but actual CSS rendering might produce shorter rows. To prevent empty space,
+                    // ensure we render at least enough rows to fill the viewport using ESTIMATED_ROW_HEIGHT
+                    // as a conservative minimum.
+                    const minRowsToFillViewport = Math.ceil(container.clientHeight / DiffViewer.ESTIMATED_ROW_HEIGHT);
+                    visibleRowEnd = Math.max(visibleRowEnd, visibleRowStart + minRowsToFillViewport + buffer);
+                    // Also ensure we render all rows when near the bottom
+                    if (contentScrollTop + container.clientHeight >= totalHeight - buffer * DiffViewer.ESTIMATED_ROW_HEIGHT) {
+                        visibleRowEnd = lastRowIndex + buffer;
+                    }
+                }
+                else {
+                    // Fixed height fallback
+                    const viewportRows = Math.ceil(container.clientHeight / DiffViewer.ESTIMATED_ROW_HEIGHT);
+                    visibleRowStart = Math.max(0, visibleStartRow - buffer);
+                    visibleRowEnd = visibleStartRow + viewportRows + buffer;
+                }
             }
             // First pass: build a map of lineIndex -> renderedRowIndex
             // This accounts for code folding where some lines don't render or render as fold indicators
@@ -589,6 +649,7 @@ class DiffViewer extends React.Component {
             const diffNodes = [];
             let topPadding = 0;
             let firstVisibleFound = false;
+            let lastRenderedRowIndex = -1;
             seenBlocks.clear();
             for (let lineIndex = 0; lineIndex < lineInformation.length; lineIndex++) {
                 const line = lineInformation[lineIndex];
@@ -606,9 +667,13 @@ class DiffViewer extends React.Component {
                 }
                 // Calculate top padding from the first visible row
                 if (!firstVisibleFound) {
-                    topPadding = rowIndex * DiffViewer.ESTIMATED_ROW_HEIGHT;
+                    topPadding = cumulativeOffsets
+                        ? cumulativeOffsets[rowIndex] || 0
+                        : rowIndex * DiffViewer.ESTIMATED_ROW_HEIGHT;
                     firstVisibleFound = true;
                 }
+                // Track the last rendered row for bottom padding calculation
+                lastRenderedRowIndex = rowIndex;
                 // Render the line
                 if (showDiffOnly) {
                     const blockIndex = lineBlocks[lineIndex];
@@ -628,15 +693,41 @@ class DiffViewer extends React.Component {
                     ? this.renderSplitView(line, lineIndex)
                     : this.renderInlineView(line, lineIndex));
             }
+            // Calculate total content height
+            const totalContentHeight = cumulativeOffsets
+                ? cumulativeOffsets[cumulativeOffsets.length - 1] || 0
+                : totalRenderedRows * DiffViewer.ESTIMATED_ROW_HEIGHT;
+            // Calculate bottom padding: space after the last rendered row
+            const bottomPadding = cumulativeOffsets && lastRenderedRowIndex >= 0
+                ? totalContentHeight - (cumulativeOffsets[lastRenderedRowIndex + 1] || totalContentHeight)
+                : 0;
             return {
                 diffNodes,
                 blocks,
                 lineInformation,
                 totalRenderedRows,
                 topPadding,
+                bottomPadding,
+                totalContentHeight,
+                renderedCount: diffNodes.length,
+                // Debug info
+                debug: {
+                    visibleRowStart,
+                    visibleRowEnd,
+                    totalRows: totalRenderedRows,
+                    offsetsLength: (_b = cumulativeOffsets === null || cumulativeOffsets === void 0 ? void 0 : cumulativeOffsets.length) !== null && _b !== void 0 ? _b : 0,
+                    renderedCount: diffNodes.length,
+                    scrollTop: (_d = (_c = scrollableContainerRef.current) === null || _c === void 0 ? void 0 : _c.scrollTop) !== null && _d !== void 0 ? _d : 0,
+                    headerHeight: this.getStickyHeaderHeight(),
+                    contentScrollTop: scrollableContainerRef.current
+                        ? Math.max(0, scrollableContainerRef.current.scrollTop - this.getStickyHeaderHeight())
+                        : 0,
+                    clientHeight: (_f = (_e = scrollableContainerRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight) !== null && _f !== void 0 ? _f : 0,
+                }
             };
         };
         this.render = () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
             const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, compareMethod, hideLineNumbers, nonce, } = this.props;
             if (typeof compareMethod === "string" &&
                 compareMethod !== DiffMethod.JSON) {
@@ -690,9 +781,12 @@ class DiffViewer extends React.Component {
                 overflowX: 'hidden',
                 height: this.props.infiniteLoading.containerHeight
             } : {};
-            const totalContentHeight = nodes.totalRenderedRows * DiffViewer.ESTIMATED_ROW_HEIGHT;
+            // Only apply noWrap when infiniteLoading is enabled but we don't have cumulative offsets yet
+            // Once offsets are calculated, we enable pre-wrap for proper text wrapping
+            const shouldNoWrap = !!this.props.infiniteLoading && !this.state.cumulativeOffsets;
             const tableElement = (_jsxs("table", { className: cn(this.styles.diffContainer, {
                     [this.styles.splitView]: splitView,
+                    [this.styles.noWrap]: shouldNoWrap,
                 }), onMouseUp: () => {
                     const elements = document.getElementsByClassName("right");
                     for (let i = 0; i < elements.length; i++) {
@@ -705,13 +799,37 @@ class DiffViewer extends React.Component {
                         element.classList.remove(this.styles.noSelect);
                     }
                 }, children: [_jsxs("colgroup", { children: [!this.props.hideLineNumbers && _jsx("col", { width: "50px" }), !splitView && !this.props.hideLineNumbers && _jsx("col", { width: "50px" }), this.props.renderGutter && _jsx("col", { width: "50px" }), _jsx("col", { width: "28px" }), _jsx("col", { width: "auto" }), splitView && (_jsxs(_Fragment, { children: [!this.props.hideLineNumbers && _jsx("col", { width: "50px" }), this.props.renderGutter && _jsx("col", { width: "50px" }), _jsx("col", { width: "28px" }), _jsx("col", { width: "auto" })] }))] }), _jsx("tbody", { children: nodes.diffNodes })] }));
-            return (_jsxs("div", { style: Object.assign(Object.assign({}, scrollDivStyle), { position: 'relative' }), onScroll: this.onScroll, ref: this.state.scrollableContainerRef, children: [(!this.props.hideSummary || leftTitle || rightTitle) && (_jsxs("div", { className: this.styles.stickyHeader, children: [!this.props.hideSummary && (_jsxs("div", { className: this.styles.summary, role: "banner", children: [_jsx("button", { type: "button", className: this.styles.allExpandButton, onClick: () => {
+            return (_jsxs("div", { style: Object.assign(Object.assign({}, scrollDivStyle), { position: 'relative' }), onScroll: this.onScroll, ref: this.state.scrollableContainerRef, children: [(!this.props.hideSummary || leftTitle || rightTitle) && (_jsxs("div", { ref: this.stickyHeaderRef, className: this.styles.stickyHeader, children: [!this.props.hideSummary && (_jsxs("div", { className: this.styles.summary, role: "banner", children: [_jsx("button", { type: "button", className: this.styles.allExpandButton, onClick: () => {
                                             this.setState({
                                                 expandedBlocks: allExpanded
                                                     ? []
                                                     : nodes.blocks.map((b) => b.index),
-                                            });
-                                        }, children: allExpanded ? _jsx(Fold, {}) : _jsx(Expand, {}) }), " ", totalChanges, _jsx("div", { style: { display: "flex", gap: "1px" }, children: blocks }), this.props.summary ? _jsx("span", { children: this.props.summary }) : null] })), (leftTitle || rightTitle) && (_jsxs("div", { className: this.styles.columnHeaders, children: [_jsx("div", { className: this.styles.titleBlock, children: leftTitle ? (_jsx("pre", { className: this.styles.contentText, children: leftTitle })) : null }), splitView && (_jsx("div", { className: this.styles.titleBlock, children: rightTitle ? (_jsx("pre", { className: this.styles.contentText, children: rightTitle })) : null }))] }))] })), this.state.isLoading && LoadingElement && _jsx(LoadingElement, {}), this.props.infiniteLoading ? (_jsx("div", { style: { minHeight: totalContentHeight, paddingTop: nodes.topPadding }, children: tableElement })) : (tableElement)] }));
+                                            }, () => this.recalculateOffsets());
+                                        }, children: allExpanded ? _jsx(Fold, {}) : _jsx(Expand, {}) }), " ", totalChanges, _jsx("div", { style: { display: "flex", gap: "1px" }, children: blocks }), this.props.summary ? _jsx("span", { children: this.props.summary }) : null] })), (leftTitle || rightTitle) && (_jsxs("div", { className: this.styles.columnHeaders, children: [_jsx("div", { className: this.styles.titleBlock, children: leftTitle ? (_jsx("pre", { className: this.styles.contentText, children: leftTitle })) : null }), splitView && (_jsx("div", { className: this.styles.titleBlock, children: rightTitle ? (_jsx("pre", { className: this.styles.contentText, children: rightTitle })) : null }))] }))] })), this.state.isLoading && LoadingElement && _jsx(LoadingElement, {}), this.props.infiniteLoading ? (_jsx("div", { style: {
+                            paddingTop: nodes.topPadding,
+                            paddingBottom: nodes.bottomPadding,
+                        }, children: tableElement })) : (tableElement), _jsx("span", { ref: this.charMeasureRef, style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: '-9999px',
+                            visibility: 'hidden',
+                            whiteSpace: 'pre',
+                            fontFamily: 'monospace',
+                            fontSize: 12,
+                        }, "aria-hidden": "true", children: "M" }), this.props.infiniteLoading && this.props.showDebugInfo && (_jsxs("div", { style: {
+                            position: 'fixed',
+                            top: 10,
+                            right: 10,
+                            background: 'rgba(0,0,0,0.85)',
+                            color: '#0f0',
+                            padding: '10px',
+                            fontFamily: 'monospace',
+                            fontSize: '11px',
+                            zIndex: 9999,
+                            borderRadius: '4px',
+                            maxWidth: '300px',
+                            lineHeight: 1.4,
+                        }, children: [_jsx("div", { style: { fontWeight: 'bold', marginBottom: '5px', color: '#fff' }, children: "Debug Info" }), _jsxs("div", { children: ["scrollTop: ", nodes.debug.scrollTop] }), _jsxs("div", { children: ["headerHeight: ", nodes.debug.headerHeight] }), _jsxs("div", { children: ["contentScrollTop: ", nodes.debug.contentScrollTop] }), _jsxs("div", { children: ["clientHeight: ", nodes.debug.clientHeight] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["visibleRowStart: ", nodes.debug.visibleRowStart] }), _jsxs("div", { children: ["visibleRowEnd: ", nodes.debug.visibleRowEnd] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["totalRows: ", nodes.debug.totalRows] }), _jsxs("div", { children: ["offsetsLength: ", nodes.debug.offsetsLength] }), _jsxs("div", { children: ["renderedCount: ", nodes.debug.renderedCount] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["topPadding: ", nodes.topPadding.toFixed(0)] }), _jsxs("div", { children: ["bottomPadding: ", nodes.bottomPadding.toFixed(0)] }), _jsxs("div", { children: ["totalContentHeight: ", nodes.totalContentHeight.toFixed(0)] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px', color: '#ff0' }, children: [_jsxs("div", { children: ["cumulativeOffsets: ", this.state.cumulativeOffsets ? 'SET' : 'NULL'] }), _jsxs("div", { children: ["columnWidth: ", (_b = (_a = this.state.contentColumnWidth) === null || _a === void 0 ? void 0 : _a.toFixed(0)) !== null && _b !== void 0 ? _b : 'N/A', "px"] }), _jsxs("div", { children: ["charWidth: ", (_d = (_c = this.state.charWidth) === null || _c === void 0 ? void 0 : _c.toFixed(2)) !== null && _d !== void 0 ? _d : 'N/A', "px"] }), _jsxs("div", { children: ["charsPerRow: ", this.state.contentColumnWidth && this.state.charWidth ? Math.floor(this.state.contentColumnWidth / this.state.charWidth) : 'N/A'] })] }), this.state.cumulativeOffsets && (_jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px', color: '#0ff', fontSize: '10px' }, children: [_jsxs("div", { children: ["offsets[", nodes.debug.visibleRowEnd, "]: ", (_f = (_e = this.state.cumulativeOffsets[nodes.debug.visibleRowEnd]) === null || _e === void 0 ? void 0 : _e.toFixed(0)) !== null && _f !== void 0 ? _f : 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows - 1, "]: ", (_h = (_g = this.state.cumulativeOffsets[nodes.debug.totalRows - 1]) === null || _g === void 0 ? void 0 : _g.toFixed(0)) !== null && _h !== void 0 ? _h : 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows, "]: ", (_k = (_j = this.state.cumulativeOffsets[nodes.debug.totalRows]) === null || _j === void 0 ? void 0 : _j.toFixed(0)) !== null && _k !== void 0 ? _k : 'N/A'] }), _jsxs("div", { style: { marginTop: '3px' }, children: ["viewportEnd: ", (nodes.debug.contentScrollTop + nodes.debug.clientHeight).toFixed(0)] }), _jsxs("div", { style: { marginTop: '3px', color: '#f0f' }, children: ["scrollHeight: ", (_m = (_l = this.state.scrollableContainerRef.current) === null || _l === void 0 ? void 0 : _l.scrollHeight) !== null && _m !== void 0 ? _m : 'N/A'] }), _jsxs("div", { children: ["maxScrollTop: ", ((_p = (_o = this.state.scrollableContainerRef.current) === null || _o === void 0 ? void 0 : _o.scrollHeight) !== null && _p !== void 0 ? _p : 0) - nodes.debug.clientHeight] })] }))] }))] }));
         };
         this.state = {
             expandedBlocks: [],
@@ -719,9 +837,117 @@ class DiffViewer extends React.Component {
             scrollableContainerRef: React.createRef(),
             computedDiffResult: {},
             isLoading: false,
-            visibleStartRow: 0
+            visibleStartRow: 0,
+            contentColumnWidth: null,
+            charWidth: null,
+            cumulativeOffsets: null,
         };
     }
+    /**
+     * Gets the height of the sticky header, if present.
+     */
+    getStickyHeaderHeight() {
+        var _a;
+        return ((_a = this.stickyHeaderRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+    }
+    /**
+     * Measures the width of a single character in the monospace font.
+     * Falls back to 7.2px if measurement fails.
+     */
+    measureCharWidth() {
+        const span = this.charMeasureRef.current;
+        if (!span)
+            return 7.2; // fallback
+        return span.getBoundingClientRect().width || 7.2;
+    }
+    /**
+     * Measures the available width for content in a content column.
+     * Falls back to estimating from container width if direct measurement fails.
+     */
+    measureContentColumnWidth() {
+        // Try direct measurement first
+        const cell = this.contentColumnRef.current;
+        if (cell && cell.clientWidth > 0) {
+            const style = window.getComputedStyle(cell);
+            const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+            const width = cell.clientWidth - padding;
+            if (width > 0)
+                return width;
+        }
+        // Fallback: estimate from container width
+        // In split view: container has 2 content columns + gutters (50px each) + markers (28px each)
+        // In unified view: 1 content column + 2 gutters + 1 marker
+        const container = this.state.scrollableContainerRef.current;
+        if (!container || container.clientWidth <= 0)
+            return null;
+        const containerWidth = container.clientWidth;
+        const gutterWidth = this.props.hideLineNumbers ? 0 : 50;
+        const markerWidth = 28;
+        const gutterCount = this.props.splitView ? 2 : 2; // left gutter(s)
+        const markerCount = this.props.splitView ? 2 : 1;
+        const contentColumns = this.props.splitView ? 2 : 1;
+        const fixedWidth = gutterCount * gutterWidth + markerCount * markerWidth;
+        const availableWidth = containerWidth - fixedWidth;
+        return Math.max(100, availableWidth / contentColumns); // minimum 100px
+    }
+    /**
+     * Gets the text length from a value that may be a string or DiffInformation array.
+     */
+    getTextLength(value) {
+        if (!value)
+            return 0;
+        if (typeof value === 'string')
+            return value.length;
+        return value.reduce((sum, d) => sum + (typeof d.value === 'string' ? d.value.length : 0), 0);
+    }
+    /**
+     * Builds cumulative vertical offsets for each line based on character count and column width.
+     * This allows accurate scroll position calculations with variable row heights.
+     */
+    buildCumulativeOffsets(lineInformation, lineBlocks, blocks, expandedBlocks, showDiffOnly, charWidth, columnWidth, splitView) {
+        var _a, _b;
+        const offsets = [0];
+        const seenBlocks = new Set();
+        for (let i = 0; i < lineInformation.length; i++) {
+            const line = lineInformation[i];
+            if (showDiffOnly) {
+                const blockIndex = lineBlocks[i];
+                if (blockIndex !== undefined && !expandedBlocks.includes(blockIndex)) {
+                    const isLastLine = blocks[blockIndex].endLine === i;
+                    if (!seenBlocks.has(blockIndex) && isLastLine) {
+                        seenBlocks.add(blockIndex);
+                        offsets.push(offsets[offsets.length - 1] + DiffViewer.ESTIMATED_ROW_HEIGHT);
+                    }
+                    continue;
+                }
+            }
+            // Calculate visual rows for this line
+            const leftLen = ((_a = line.left) === null || _a === void 0 ? void 0 : _a.value) ? this.getTextLength(line.left.value) : 0;
+            const rightLen = ((_b = line.right) === null || _b === void 0 ? void 0 : _b.value) ? this.getTextLength(line.right.value) : 0;
+            const maxLen = splitView ? Math.max(leftLen, rightLen) : (leftLen || rightLen);
+            const charsPerRow = Math.floor(columnWidth / charWidth);
+            const visualRows = charsPerRow > 0 ? Math.max(1, Math.ceil(maxLen / charsPerRow)) : 1;
+            offsets.push(offsets[offsets.length - 1] + visualRows * DiffViewer.ESTIMATED_ROW_HEIGHT);
+        }
+        return offsets;
+    }
+    /**
+     * Binary search to find the line index at a given scroll offset.
+     */
+    findLineAtOffset(scrollTop, offsets) {
+        let low = 0;
+        let high = offsets.length - 2;
+        while (low < high) {
+            const mid = Math.floor((low + high + 1) / 2);
+            if (offsets[mid] <= scrollTop) {
+                low = mid;
+            }
+            else {
+                high = mid - 1;
+            }
+        }
+        return low;
+    }
     componentDidUpdate(prevProps) {
         if (prevProps.oldValue !== this.props.oldValue ||
             prevProps.newValue !== this.props.newValue ||
@@ -730,13 +956,27 @@ class DiffViewer extends React.Component {
             prevProps.linesOffset !== this.props.linesOffset) {
             // Clear word diff cache when diff changes
             this.wordDiffCache.clear();
-            this.setState((prev) => (Object.assign(Object.assign({}, prev), { isLoading: true, visibleStartRow: 0 })));
+            this.setState((prev) => (Object.assign(Object.assign({}, prev), { isLoading: true, visibleStartRow: 0, cumulativeOffsets: null })));
             this.memoisedCompute();
         }
     }
     componentDidMount() {
         this.setState((prev) => (Object.assign(Object.assign({}, prev), { isLoading: true })));
         this.memoisedCompute();
+        // Set up ResizeObserver for recalculating offsets on container resize
+        if (typeof ResizeObserver !== 'undefined' && this.props.infiniteLoading) {
+            this.resizeObserver = new ResizeObserver(() => {
+                requestAnimationFrame(() => this.recalculateOffsets());
+            });
+            const container = this.state.scrollableContainerRef.current;
+            if (container) {
+                this.resizeObserver.observe(container);
+            }
+        }
+    }
+    componentWillUnmount() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
 }
 DiffViewer.defaultProps = {

package/lib/cjs/src/styles.d.ts

@@ -28,6 +28,7 @@ export interface ReactDiffViewerStyles {
     content?: string;
     column?: string;
     noSelect?: string;
+    noWrap?: string;
     splitView?: string;
     allExpandButton?: string;
     [key: string]: string | undefined;

package/lib/cjs/src/styles.js

@@ -72,6 +72,7 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
     const { css, cx } = createEmotion({ key: "react-diff", nonce });
     const content = css({
         width: "auto",
+        overflow: "hidden",
         label: "content",
     });
     const splitView = css({
@@ -113,6 +114,9 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         },
         label: "diff-container",
         borderCollapse: "collapse",
+        "@media (max-width: 768px)": {
+            minWidth: "unset",
+        },
     });
     const lineContent = css({
         overflow: "hidden",
@@ -130,6 +134,16 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         userSelect: "none",
         label: "unselectable",
     });
+    const noWrap = css({
+        label: "no-wrap",
+        pre: {
+            whiteSpace: "pre",
+        },
+        [`.${contentText}`]: {
+            whiteSpace: "pre",
+            lineBreak: "auto",
+        },
+    });
     const allExpandButton = css({
         background: "transparent",
         border: "none",
@@ -376,6 +390,7 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         blockDeletion,
         wordRemoved,
         noSelect: unselectable,
+        noWrap,
         codeFoldGutter,
         codeFoldExpandButton,
         codeFoldContentContainer,

package/lib/esm/src/compute-lines.js

@@ -490,19 +490,29 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
  * @returns Promise<ComputedLineInformation> - Resolves with line-by-line diff data from the worker.
  */
 const computeLineInformationWorker = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = [], deferWordDiff = false) => {
+    const fallback = () => computeLineInformation(oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff);
     // Fall back to synchronous computation if Worker is not available (e.g., in Node.js/test environments)
     if (typeof Worker === 'undefined') {
-        return Promise.resolve(computeLineInformation(oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff));
+        return Promise.resolve(fallback());
     }
-    return new Promise((resolve, reject) => {
-        const worker = new Worker(new URL('./computeWorker.ts', import.meta.url), { type: 'module' });
+    return new Promise((resolve) => {
+        let worker;
+        try {
+            worker = new Worker(new URL('./computeWorker.js', import.meta.url), { type: 'module' });
+        }
+        catch {
+            // Worker instantiation failed - fall back to synchronous computation
+            resolve(fallback());
+            return;
+        }
         worker.onmessage = (e) => {
             resolve(e.data);
             worker.terminate();
         };
-        worker.onerror = (err) => {
-            reject(err);
+        worker.onerror = () => {
+            // Worker error - fall back to synchronous computation
             worker.terminate();
+            resolve(fallback());
         };
         worker.postMessage({ oldString, newString, disableWordDiff, lineCompareMethod, linesOffset, showLines, deferWordDiff });
     });

package/lib/esm/src/index.js

@@ -151,6 +151,11 @@ class DiffViewer extends React.Component {
     styles;
     // Cache for on-demand word diff computation
     wordDiffCache = new Map();
+    // Refs for measuring content column width and character width
+    contentColumnRef = React.createRef();
+    charMeasureRef = React.createRef();
+    stickyHeaderRef = React.createRef();
+    resizeObserver = null;
     static defaultProps = {
         oldValue: "",
         newValue: "",
@@ -174,7 +179,10 @@ class DiffViewer extends React.Component {
             scrollableContainerRef: React.createRef(),
             computedDiffResult: {},
             isLoading: false,
-            visibleStartRow: 0
+            visibleStartRow: 0,
+            contentColumnWidth: null,
+            charWidth: null,
+            cumulativeOffsets: null,
         };
     }
     /**
@@ -227,8 +235,130 @@ class DiffViewer extends React.Component {
     onBlockExpand = (id) => {
         const prevState = this.state.expandedBlocks.slice();
         prevState.push(id);
-        this.setState({
-            expandedBlocks: prevState,
+        this.setState({ expandedBlocks: prevState }, () => this.recalculateOffsets());
+    };
+    /**
+     * Gets the height of the sticky header, if present.
+     */
+    getStickyHeaderHeight() {
+        return this.stickyHeaderRef.current?.offsetHeight || 0;
+    }
+    /**
+     * Measures the width of a single character in the monospace font.
+     * Falls back to 7.2px if measurement fails.
+     */
+    measureCharWidth() {
+        const span = this.charMeasureRef.current;
+        if (!span)
+            return 7.2; // fallback
+        return span.getBoundingClientRect().width || 7.2;
+    }
+    /**
+     * Measures the available width for content in a content column.
+     * Falls back to estimating from container width if direct measurement fails.
+     */
+    measureContentColumnWidth() {
+        // Try direct measurement first
+        const cell = this.contentColumnRef.current;
+        if (cell && cell.clientWidth > 0) {
+            const style = window.getComputedStyle(cell);
+            const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+            const width = cell.clientWidth - padding;
+            if (width > 0)
+                return width;
+        }
+        // Fallback: estimate from container width
+        // In split view: container has 2 content columns + gutters (50px each) + markers (28px each)
+        // In unified view: 1 content column + 2 gutters + 1 marker
+        const container = this.state.scrollableContainerRef.current;
+        if (!container || container.clientWidth <= 0)
+            return null;
+        const containerWidth = container.clientWidth;
+        const gutterWidth = this.props.hideLineNumbers ? 0 : 50;
+        const markerWidth = 28;
+        const gutterCount = this.props.splitView ? 2 : 2; // left gutter(s)
+        const markerCount = this.props.splitView ? 2 : 1;
+        const contentColumns = this.props.splitView ? 2 : 1;
+        const fixedWidth = gutterCount * gutterWidth + markerCount * markerWidth;
+        const availableWidth = containerWidth - fixedWidth;
+        return Math.max(100, availableWidth / contentColumns); // minimum 100px
+    }
+    /**
+     * Gets the text length from a value that may be a string or DiffInformation array.
+     */
+    getTextLength(value) {
+        if (!value)
+            return 0;
+        if (typeof value === 'string')
+            return value.length;
+        return value.reduce((sum, d) => sum + (typeof d.value === 'string' ? d.value.length : 0), 0);
+    }
+    /**
+     * Builds cumulative vertical offsets for each line based on character count and column width.
+     * This allows accurate scroll position calculations with variable row heights.
+     */
+    buildCumulativeOffsets(lineInformation, lineBlocks, blocks, expandedBlocks, showDiffOnly, charWidth, columnWidth, splitView) {
+        const offsets = [0];
+        const seenBlocks = new Set();
+        for (let i = 0; i < lineInformation.length; i++) {
+            const line = lineInformation[i];
+            if (showDiffOnly) {
+                const blockIndex = lineBlocks[i];
+                if (blockIndex !== undefined && !expandedBlocks.includes(blockIndex)) {
+                    const isLastLine = blocks[blockIndex].endLine === i;
+                    if (!seenBlocks.has(blockIndex) && isLastLine) {
+                        seenBlocks.add(blockIndex);
+                        offsets.push(offsets[offsets.length - 1] + DiffViewer.ESTIMATED_ROW_HEIGHT);
+                    }
+                    continue;
+                }
+            }
+            // Calculate visual rows for this line
+            const leftLen = line.left?.value ? this.getTextLength(line.left.value) : 0;
+            const rightLen = line.right?.value ? this.getTextLength(line.right.value) : 0;
+            const maxLen = splitView ? Math.max(leftLen, rightLen) : (leftLen || rightLen);
+            const charsPerRow = Math.floor(columnWidth / charWidth);
+            const visualRows = charsPerRow > 0 ? Math.max(1, Math.ceil(maxLen / charsPerRow)) : 1;
+            offsets.push(offsets[offsets.length - 1] + visualRows * DiffViewer.ESTIMATED_ROW_HEIGHT);
+        }
+        return offsets;
+    }
+    /**
+     * Binary search to find the line index at a given scroll offset.
+     */
+    findLineAtOffset(scrollTop, offsets) {
+        let low = 0;
+        let high = offsets.length - 2;
+        while (low < high) {
+            const mid = Math.floor((low + high + 1) / 2);
+            if (offsets[mid] <= scrollTop) {
+                low = mid;
+            }
+            else {
+                high = mid - 1;
+            }
+        }
+        return low;
+    }
+    /**
+     * Recalculates cumulative offsets based on current measurements.
+     * Called on resize and when blocks are expanded/collapsed.
+     */
+    recalculateOffsets = () => {
+        if (!this.props.infiniteLoading)
+            return;
+        const columnWidth = this.measureContentColumnWidth();
+        const charWidth = this.measureCharWidth();
+        if (!columnWidth)
+            return;
+        const cacheKey = this.getMemoisedKey();
+        const { lineInformation, lineBlocks, blocks } = this.state.computedDiffResult[cacheKey] ?? {};
+        if (!lineInformation)
+            return;
+        const offsets = this.buildCumulativeOffsets(lineInformation, lineBlocks, blocks, this.state.expandedBlocks, this.props.showDiffOnly, charWidth, columnWidth, this.props.splitView);
+        this.setState({ cumulativeOffsets: offsets, contentColumnWidth: columnWidth, charWidth }, () => {
+            // Force a scroll position update to recalculate visible rows with new offsets
+            this.onScroll();
         });
     };
     /**
@@ -394,7 +524,7 @@ class DiffViewer extends React.Component {
                         [this.styles.diffRemoved]: removed,
                         [this.styles.diffChanged]: changed,
                         [this.styles.highlightedLine]: highlightLine,
-                    }), children: _jsxs("pre", { children: [added && "+", removed && "-"] }) }), _jsx("td", { className: cn(this.styles.content, {
+                    }), children: _jsxs("pre", { children: [added && "+", removed && "-"] }) }), _jsx("td", { ref: prefix === LineNumberPrefix.LEFT && !this.state.cumulativeOffsets ? this.contentColumnRef : undefined, className: cn(this.styles.content, {
                         [this.styles.emptyLine]: !content,
                         [this.styles.diffAdded]: added,
                         [this.styles.diffRemoved]: removed,
@@ -538,7 +668,13 @@ class DiffViewer extends React.Component {
             ...prev,
             computedDiffResult: this.state.computedDiffResult,
             isLoading: false,
-        }));
+        }), () => {
+            // Trigger offset recalculation after diff is computed and rendered
+            // Use requestAnimationFrame to ensure DOM is ready for measurement
+            if (this.props.infiniteLoading) {
+                requestAnimationFrame(() => this.recalculateOffsets());
+            }
+        });
     };
     // Estimated row height based on lineHeight: 1.6em with 12px base font
     static ESTIMATED_ROW_HEIGHT = 19;
@@ -551,7 +687,13 @@ class DiffViewer extends React.Component {
         const container = this.state.scrollableContainerRef.current;
         if (!container || !this.props.infiniteLoading)
             return;
-        const newStartRow = Math.floor(container.scrollTop / DiffViewer.ESTIMATED_ROW_HEIGHT);
+        // Account for sticky header height in scroll calculations
+        const headerHeight = this.getStickyHeaderHeight();
+        const contentScrollTop = Math.max(0, container.scrollTop - headerHeight);
+        const { cumulativeOffsets } = this.state;
+        const newStartRow = cumulativeOffsets
+            ? this.findLineAtOffset(contentScrollTop, cumulativeOffsets)
+            : Math.floor(contentScrollTop / DiffViewer.ESTIMATED_ROW_HEIGHT);
         // Only update state if the start row changed (avoid unnecessary re-renders)
         if (newStartRow !== this.state.visibleStartRow) {
             this.setState({ visibleStartRow: newStartRow });
@@ -562,7 +704,7 @@ class DiffViewer extends React.Component {
      */
     renderDiff = () => {
         const { splitView, infiniteLoading, showDiffOnly } = this.props;
-        const { computedDiffResult, expandedBlocks, visibleStartRow, scrollableContainerRef } = this.state;
+        const { computedDiffResult, expandedBlocks, visibleStartRow, scrollableContainerRef, cumulativeOffsets } = this.state;
         const cacheKey = this.getMemoisedKey();
         const { lineInformation = [], lineBlocks = [], blocks = [] } = computedDiffResult[cacheKey] ?? {};
         // Calculate visible range for virtualization
@@ -571,9 +713,32 @@ class DiffViewer extends React.Component {
         const buffer = 5; // render extra rows above/below viewport
         if (infiniteLoading && scrollableContainerRef.current) {
             const container = scrollableContainerRef.current;
-            const viewportRows = Math.ceil(container.clientHeight / DiffViewer.ESTIMATED_ROW_HEIGHT);
-            visibleRowStart = Math.max(0, visibleStartRow - buffer);
-            visibleRowEnd = visibleStartRow + viewportRows + buffer;
+            // Account for sticky header height in scroll calculations
+            const headerHeight = this.getStickyHeaderHeight();
+            const contentScrollTop = Math.max(0, container.scrollTop - headerHeight);
+            if (cumulativeOffsets) {
+                // Variable height mode: use binary search to find visible range
+                const totalHeight = cumulativeOffsets[cumulativeOffsets.length - 1] || 0;
+                const lastRowIndex = cumulativeOffsets.length - 2;
+                visibleRowStart = Math.max(0, this.findLineAtOffset(contentScrollTop, cumulativeOffsets) - buffer);
+                visibleRowEnd = this.findLineAtOffset(contentScrollTop + container.clientHeight, cumulativeOffsets) + buffer;
+                // IMPORTANT: The calculated offsets may overestimate row heights (based on char count),
+                // but actual CSS rendering might produce shorter rows. To prevent empty space,
+                // ensure we render at least enough rows to fill the viewport using ESTIMATED_ROW_HEIGHT
+                // as a conservative minimum.
+                const minRowsToFillViewport = Math.ceil(container.clientHeight / DiffViewer.ESTIMATED_ROW_HEIGHT);
+                visibleRowEnd = Math.max(visibleRowEnd, visibleRowStart + minRowsToFillViewport + buffer);
+                // Also ensure we render all rows when near the bottom
+                if (contentScrollTop + container.clientHeight >= totalHeight - buffer * DiffViewer.ESTIMATED_ROW_HEIGHT) {
+                    visibleRowEnd = lastRowIndex + buffer;
+                }
+            }
+            else {
+                // Fixed height fallback
+                const viewportRows = Math.ceil(container.clientHeight / DiffViewer.ESTIMATED_ROW_HEIGHT);
+                visibleRowStart = Math.max(0, visibleStartRow - buffer);
+                visibleRowEnd = visibleStartRow + viewportRows + buffer;
+            }
         }
         // First pass: build a map of lineIndex -> renderedRowIndex
         // This accounts for code folding where some lines don't render or render as fold indicators
@@ -611,6 +776,7 @@ class DiffViewer extends React.Component {
         const diffNodes = [];
         let topPadding = 0;
         let firstVisibleFound = false;
+        let lastRenderedRowIndex = -1;
         seenBlocks.clear();
         for (let lineIndex = 0; lineIndex < lineInformation.length; lineIndex++) {
             const line = lineInformation[lineIndex];
@@ -628,9 +794,13 @@ class DiffViewer extends React.Component {
             }
             // Calculate top padding from the first visible row
             if (!firstVisibleFound) {
-                topPadding = rowIndex * DiffViewer.ESTIMATED_ROW_HEIGHT;
+                topPadding = cumulativeOffsets
+                    ? cumulativeOffsets[rowIndex] || 0
+                    : rowIndex * DiffViewer.ESTIMATED_ROW_HEIGHT;
                 firstVisibleFound = true;
             }
+            // Track the last rendered row for bottom padding calculation
+            lastRenderedRowIndex = rowIndex;
             // Render the line
             if (showDiffOnly) {
                 const blockIndex = lineBlocks[lineIndex];
@@ -650,12 +820,37 @@ class DiffViewer extends React.Component {
                 ? this.renderSplitView(line, lineIndex)
                 : this.renderInlineView(line, lineIndex));
         }
+        // Calculate total content height
+        const totalContentHeight = cumulativeOffsets
+            ? cumulativeOffsets[cumulativeOffsets.length - 1] || 0
+            : totalRenderedRows * DiffViewer.ESTIMATED_ROW_HEIGHT;
+        // Calculate bottom padding: space after the last rendered row
+        const bottomPadding = cumulativeOffsets && lastRenderedRowIndex >= 0
+            ? totalContentHeight - (cumulativeOffsets[lastRenderedRowIndex + 1] || totalContentHeight)
+            : 0;
         return {
             diffNodes,
             blocks,
             lineInformation,
             totalRenderedRows,
             topPadding,
+            bottomPadding,
+            totalContentHeight,
+            renderedCount: diffNodes.length,
+            // Debug info
+            debug: {
+                visibleRowStart,
+                visibleRowEnd,
+                totalRows: totalRenderedRows,
+                offsetsLength: cumulativeOffsets?.length ?? 0,
+                renderedCount: diffNodes.length,
+                scrollTop: scrollableContainerRef.current?.scrollTop ?? 0,
+                headerHeight: this.getStickyHeaderHeight(),
+                contentScrollTop: scrollableContainerRef.current
+                    ? Math.max(0, scrollableContainerRef.current.scrollTop - this.getStickyHeaderHeight())
+                    : 0,
+                clientHeight: scrollableContainerRef.current?.clientHeight ?? 0,
+            }
         };
     };
     componentDidUpdate(prevProps) {
@@ -669,7 +864,8 @@ class DiffViewer extends React.Component {
             this.setState((prev) => ({
                 ...prev,
                 isLoading: true,
-                visibleStartRow: 0
+                visibleStartRow: 0,
+                cumulativeOffsets: null,
             }));
             this.memoisedCompute();
         }
@@ -680,6 +876,19 @@ class DiffViewer extends React.Component {
             isLoading: true
         }));
         this.memoisedCompute();
+        // Set up ResizeObserver for recalculating offsets on container resize
+        if (typeof ResizeObserver !== 'undefined' && this.props.infiniteLoading) {
+            this.resizeObserver = new ResizeObserver(() => {
+                requestAnimationFrame(() => this.recalculateOffsets());
+            });
+            const container = this.state.scrollableContainerRef.current;
+            if (container) {
+                this.resizeObserver.observe(container);
+            }
+        }
+    }
+    componentWillUnmount() {
+        this.resizeObserver?.disconnect();
     }
     render = () => {
         const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, compareMethod, hideLineNumbers, nonce, } = this.props;
@@ -735,9 +944,12 @@ class DiffViewer extends React.Component {
             overflowX: 'hidden',
             height: this.props.infiniteLoading.containerHeight
         } : {};
-        const totalContentHeight = nodes.totalRenderedRows * DiffViewer.ESTIMATED_ROW_HEIGHT;
+        // Only apply noWrap when infiniteLoading is enabled but we don't have cumulative offsets yet
+        // Once offsets are calculated, we enable pre-wrap for proper text wrapping
+        const shouldNoWrap = !!this.props.infiniteLoading && !this.state.cumulativeOffsets;
         const tableElement = (_jsxs("table", { className: cn(this.styles.diffContainer, {
                 [this.styles.splitView]: splitView,
+                [this.styles.noWrap]: shouldNoWrap,
             }), onMouseUp: () => {
                 const elements = document.getElementsByClassName("right");
                 for (let i = 0; i < elements.length; i++) {
@@ -750,13 +962,37 @@ class DiffViewer extends React.Component {
                     element.classList.remove(this.styles.noSelect);
                 }
             }, children: [_jsxs("colgroup", { children: [!this.props.hideLineNumbers && _jsx("col", { width: "50px" }), !splitView && !this.props.hideLineNumbers && _jsx("col", { width: "50px" }), this.props.renderGutter && _jsx("col", { width: "50px" }), _jsx("col", { width: "28px" }), _jsx("col", { width: "auto" }), splitView && (_jsxs(_Fragment, { children: [!this.props.hideLineNumbers && _jsx("col", { width: "50px" }), this.props.renderGutter && _jsx("col", { width: "50px" }), _jsx("col", { width: "28px" }), _jsx("col", { width: "auto" })] }))] }), _jsx("tbody", { children: nodes.diffNodes })] }));
-        return (_jsxs("div", { style: { ...scrollDivStyle, position: 'relative' }, onScroll: this.onScroll, ref: this.state.scrollableContainerRef, children: [(!this.props.hideSummary || leftTitle || rightTitle) && (_jsxs("div", { className: this.styles.stickyHeader, children: [!this.props.hideSummary && (_jsxs("div", { className: this.styles.summary, role: "banner", children: [_jsx("button", { type: "button", className: this.styles.allExpandButton, onClick: () => {
+        return (_jsxs("div", { style: { ...scrollDivStyle, position: 'relative' }, onScroll: this.onScroll, ref: this.state.scrollableContainerRef, children: [(!this.props.hideSummary || leftTitle || rightTitle) && (_jsxs("div", { ref: this.stickyHeaderRef, className: this.styles.stickyHeader, children: [!this.props.hideSummary && (_jsxs("div", { className: this.styles.summary, role: "banner", children: [_jsx("button", { type: "button", className: this.styles.allExpandButton, onClick: () => {
                                         this.setState({
                                             expandedBlocks: allExpanded
                                                 ? []
                                                 : nodes.blocks.map((b) => b.index),
-                                        });
-                                    }, children: allExpanded ? _jsx(Fold, {}) : _jsx(Expand, {}) }), " ", totalChanges, _jsx("div", { style: { display: "flex", gap: "1px" }, children: blocks }), this.props.summary ? _jsx("span", { children: this.props.summary }) : null] })), (leftTitle || rightTitle) && (_jsxs("div", { className: this.styles.columnHeaders, children: [_jsx("div", { className: this.styles.titleBlock, children: leftTitle ? (_jsx("pre", { className: this.styles.contentText, children: leftTitle })) : null }), splitView && (_jsx("div", { className: this.styles.titleBlock, children: rightTitle ? (_jsx("pre", { className: this.styles.contentText, children: rightTitle })) : null }))] }))] })), this.state.isLoading && LoadingElement && _jsx(LoadingElement, {}), this.props.infiniteLoading ? (_jsx("div", { style: { minHeight: totalContentHeight, paddingTop: nodes.topPadding }, children: tableElement })) : (tableElement)] }));
+                                        }, () => this.recalculateOffsets());
+                                    }, children: allExpanded ? _jsx(Fold, {}) : _jsx(Expand, {}) }), " ", totalChanges, _jsx("div", { style: { display: "flex", gap: "1px" }, children: blocks }), this.props.summary ? _jsx("span", { children: this.props.summary }) : null] })), (leftTitle || rightTitle) && (_jsxs("div", { className: this.styles.columnHeaders, children: [_jsx("div", { className: this.styles.titleBlock, children: leftTitle ? (_jsx("pre", { className: this.styles.contentText, children: leftTitle })) : null }), splitView && (_jsx("div", { className: this.styles.titleBlock, children: rightTitle ? (_jsx("pre", { className: this.styles.contentText, children: rightTitle })) : null }))] }))] })), this.state.isLoading && LoadingElement && _jsx(LoadingElement, {}), this.props.infiniteLoading ? (_jsx("div", { style: {
+                        paddingTop: nodes.topPadding,
+                        paddingBottom: nodes.bottomPadding,
+                    }, children: tableElement })) : (tableElement), _jsx("span", { ref: this.charMeasureRef, style: {
+                        position: 'absolute',
+                        top: 0,
+                        left: '-9999px',
+                        visibility: 'hidden',
+                        whiteSpace: 'pre',
+                        fontFamily: 'monospace',
+                        fontSize: 12,
+                    }, "aria-hidden": "true", children: "M" }), this.props.infiniteLoading && this.props.showDebugInfo && (_jsxs("div", { style: {
+                        position: 'fixed',
+                        top: 10,
+                        right: 10,
+                        background: 'rgba(0,0,0,0.85)',
+                        color: '#0f0',
+                        padding: '10px',
+                        fontFamily: 'monospace',
+                        fontSize: '11px',
+                        zIndex: 9999,
+                        borderRadius: '4px',
+                        maxWidth: '300px',
+                        lineHeight: 1.4,
+                    }, children: [_jsx("div", { style: { fontWeight: 'bold', marginBottom: '5px', color: '#fff' }, children: "Debug Info" }), _jsxs("div", { children: ["scrollTop: ", nodes.debug.scrollTop] }), _jsxs("div", { children: ["headerHeight: ", nodes.debug.headerHeight] }), _jsxs("div", { children: ["contentScrollTop: ", nodes.debug.contentScrollTop] }), _jsxs("div", { children: ["clientHeight: ", nodes.debug.clientHeight] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["visibleRowStart: ", nodes.debug.visibleRowStart] }), _jsxs("div", { children: ["visibleRowEnd: ", nodes.debug.visibleRowEnd] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["totalRows: ", nodes.debug.totalRows] }), _jsxs("div", { children: ["offsetsLength: ", nodes.debug.offsetsLength] }), _jsxs("div", { children: ["renderedCount: ", nodes.debug.renderedCount] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["topPadding: ", nodes.topPadding.toFixed(0)] }), _jsxs("div", { children: ["bottomPadding: ", nodes.bottomPadding.toFixed(0)] }), _jsxs("div", { children: ["totalContentHeight: ", nodes.totalContentHeight.toFixed(0)] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px', color: '#ff0' }, children: [_jsxs("div", { children: ["cumulativeOffsets: ", this.state.cumulativeOffsets ? 'SET' : 'NULL'] }), _jsxs("div", { children: ["columnWidth: ", this.state.contentColumnWidth?.toFixed(0) ?? 'N/A', "px"] }), _jsxs("div", { children: ["charWidth: ", this.state.charWidth?.toFixed(2) ?? 'N/A', "px"] }), _jsxs("div", { children: ["charsPerRow: ", this.state.contentColumnWidth && this.state.charWidth ? Math.floor(this.state.contentColumnWidth / this.state.charWidth) : 'N/A'] })] }), this.state.cumulativeOffsets && (_jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px', color: '#0ff', fontSize: '10px' }, children: [_jsxs("div", { children: ["offsets[", nodes.debug.visibleRowEnd, "]: ", this.state.cumulativeOffsets[nodes.debug.visibleRowEnd]?.toFixed(0) ?? 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows - 1, "]: ", this.state.cumulativeOffsets[nodes.debug.totalRows - 1]?.toFixed(0) ?? 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows, "]: ", this.state.cumulativeOffsets[nodes.debug.totalRows]?.toFixed(0) ?? 'N/A'] }), _jsxs("div", { style: { marginTop: '3px' }, children: ["viewportEnd: ", (nodes.debug.contentScrollTop + nodes.debug.clientHeight).toFixed(0)] }), _jsxs("div", { style: { marginTop: '3px', color: '#f0f' }, children: ["scrollHeight: ", this.state.scrollableContainerRef.current?.scrollHeight ?? 'N/A'] }), _jsxs("div", { children: ["maxScrollTop: ", (this.state.scrollableContainerRef.current?.scrollHeight ?? 0) - nodes.debug.clientHeight] })] }))] }))] }));
     };
 }
 export default DiffViewer;

package/lib/esm/src/styles.js

@@ -67,6 +67,7 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
     const { css, cx } = createEmotion({ key: "react-diff", nonce });
     const content = css({
         width: "auto",
+        overflow: "hidden",
         label: "content",
     });
     const splitView = css({
@@ -108,6 +109,9 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         },
         label: "diff-container",
         borderCollapse: "collapse",
+        "@media (max-width: 768px)": {
+            minWidth: "unset",
+        },
     });
     const lineContent = css({
         overflow: "hidden",
@@ -125,6 +129,16 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         userSelect: "none",
         label: "unselectable",
     });
+    const noWrap = css({
+        label: "no-wrap",
+        pre: {
+            whiteSpace: "pre",
+        },
+        [`.${contentText}`]: {
+            whiteSpace: "pre",
+            lineBreak: "auto",
+        },
+    });
     const allExpandButton = css({
         background: "transparent",
         border: "none",
@@ -371,6 +385,7 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         blockDeletion,
         wordRemoved,
         noSelect: unselectable,
+        noWrap,
         codeFoldGutter,
         codeFoldExpandButton,
         codeFoldContentContainer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diff-viewer-continued",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "private": false,
   "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
   "keywords": [
@@ -65,7 +65,7 @@
     "node": ">= 16"
   },
   "scripts": {
-    "build": "tsc --project tsconfig.json && tsc --project tsconfig.esm.json",
+    "build": "tsc --project tsconfig.json && tsc --project tsconfig.esm.json && sed -i 's/computeWorker\\.ts/computeWorker.js/g' lib/cjs/src/compute-lines.js lib/esm/src/compute-lines.js",
     "build:examples": "vite build examples",
     "publish:examples": "NODE_ENV=production pnpm run build:examples && gh-pages -d examples/dist -r $GITHUB_REPO_URL",
     "publish:examples:local": "NODE_ENV=production pnpm run build:examples && gh-pages -d examples/dist",