diff --git a/src/tags/object/Paragraphs/HtxParagraphs.js b/src/tags/object/Paragraphs/HtxParagraphs.js index d454300d6..aacf5b86d 100644 --- a/src/tags/object/Paragraphs/HtxParagraphs.js +++ b/src/tags/object/Paragraphs/HtxParagraphs.js @@ -402,15 +402,18 @@ class HtxParagraphsView extends Component { _handleScrollContainerHeight() { const container = this.myRef.current; const mainContentView = document.querySelector('.lsf-main-content'); + const mainRect = mainContentView.getBoundingClientRect(); + const visibleHeight = document.documentElement.clientHeight - mainRect.top; const annotationView = document.querySelector('.lsf-main-view__annotation'); - const totalSpace = mainContentView?.offsetHeight || 0; - const filledSpace = annotationView?.offsetHeight || 0; + const totalVisibleSpace = Math.floor(visibleHeight < mainRect.height ? visibleHeight : mainContentView?.offsetHeight || 0); + const filledSpace = annotationView?.offsetHeight || mainContentView.firstChild?.offsetHeight || 0; const containerHeight = container?.offsetHeight || 0; const viewPadding = parseInt(window.getComputedStyle(mainContentView)?.getPropertyValue('padding-bottom')) || 0; - const height = totalSpace - (filledSpace - containerHeight) - (viewPadding); + const height = totalVisibleSpace - (filledSpace - containerHeight) - (viewPadding); const minHeight = 100; if (container) this.myRef.current.style.maxHeight = `${height < minHeight ? minHeight : height}px`; + } _resizeObserver = new ResizeObserver(() => this._handleScrollContainerHeight()); diff --git a/src/tags/object/Paragraphs/Paragraphs.module.scss b/src/tags/object/Paragraphs/Paragraphs.module.scss index 2f4b646fe..4c4b9906a 100644 --- a/src/tags/object/Paragraphs/Paragraphs.module.scss +++ b/src/tags/object/Paragraphs/Paragraphs.module.scss @@ -63,7 +63,8 @@ $border-thin: 1px solid rgba(137, 128, 152, 0.16); .scroll_container { position: relative; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; counter-reset: phrase; border: $border-thin; padding: 8px;