diff --git a/web/css/resolver-main.css b/web/css/resolver-main.css index 6c00ca7..bc5f53e 100644 --- a/web/css/resolver-main.css +++ b/web/css/resolver-main.css @@ -511,6 +511,14 @@ pointer-events: none; user-select: none; } +.mr-missing-browser.is-resizing .mr-missing-list-row, +.mr-missing-browser.is-resizing .mr-match-row, +.mr-missing-browser.is-resizing .mr-search-results-table tr, +.mr-missing-browser.is-resizing .mr-btn, +.mr-missing-browser.is-resizing .mr-node-chip, +.mr-missing-browser.is-resizing .mr-category-chip { + transition: none !important; +} .mr-missing-list-toolbar { display: flex; align-items: center; @@ -617,6 +625,12 @@ text-align: left; transition: background 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; } +@supports (content-visibility: auto) { + #model-resolver-modal .mr-missing-list-row { + content-visibility: auto; + contain-intrinsic-size: auto 64px; + } +} #model-resolver-modal .mr-missing-list-row:hover { background: rgba(255,255,255,0.032); } @@ -5628,6 +5642,17 @@ border-color: rgba(255,255,255,0.065); border-radius: 7px; } +@supports (content-visibility: auto) { + #model-resolver-modal .mr-missing-detail-pane .mr-match-row { + content-visibility: auto; + contain-intrinsic-size: auto 42px; + } + + #model-resolver-modal .mr-missing-detail-pane .mr-search-results-table-wrap { + content-visibility: auto; + contain-intrinsic-size: auto 220px; + } +} #model-resolver-modal .mr-missing-detail-pane .mr-match-row.mr-best-match { background: linear-gradient(90deg, rgba(114,211,138,0.135) 0%, rgba(114,211,138,0.07) 55%, rgba(114,211,138,0.035) 100%); border-color: rgba(114,211,138,0.26); diff --git a/web/resolver/views/missing_browser_methods.js b/web/resolver/views/missing_browser_methods.js index e20c9f3..93486a7 100644 --- a/web/resolver/views/missing_browser_methods.js +++ b/web/resolver/views/missing_browser_methods.js @@ -482,6 +482,7 @@ export const missingBrowserMethods = { width: detailPane.getBoundingClientRect().width, bounds: this.getMissingBrowserSplitBounds(browser) }; + this._appliedMissingBrowserSplitWidth = Math.round(this._missingBrowserSplitStart.width); this._lastMissingBrowserSplitApply = 0; this._missingBrowserSplitBrowser = browser; this._missingBrowserSplitDetailPane = detailPane; @@ -509,8 +510,11 @@ export const missingBrowserMethods = { if (this._missingBrowserSplitFrame) return; this._missingBrowserSplitFrame = requestAnimationFrame(() => { this._missingBrowserSplitFrame = null; - if (!this._missingBrowserSplitDragging || !this._missingBrowserSplitDetailPane || !this._pendingMissingBrowserSplitWidth) return; - this._missingBrowserSplitDetailPane.style.setProperty('--mr-missing-detail-track', `${this._pendingMissingBrowserSplitWidth}px`); + const nextWidth = this._pendingMissingBrowserSplitWidth; + if (!this._missingBrowserSplitDragging || !this._missingBrowserSplitDetailPane || !nextWidth) return; + if (nextWidth === this._appliedMissingBrowserSplitWidth) return; + this._missingBrowserSplitDetailPane.style.setProperty('--mr-missing-detail-track', `${nextWidth}px`); + this._appliedMissingBrowserSplitWidth = nextWidth; }); }, @@ -524,7 +528,10 @@ export const missingBrowserMethods = { this._missingBrowserSplitFrame = null; } if (this._missingBrowserSplitDetailPane && this._pendingMissingBrowserSplitWidth) { - this._missingBrowserSplitDetailPane.style.setProperty('--mr-missing-detail-track', `${this._pendingMissingBrowserSplitWidth}px`); + if (this._pendingMissingBrowserSplitWidth !== this._appliedMissingBrowserSplitWidth) { + this._missingBrowserSplitDetailPane.style.setProperty('--mr-missing-detail-track', `${this._pendingMissingBrowserSplitWidth}px`); + this._appliedMissingBrowserSplitWidth = this._pendingMissingBrowserSplitWidth; + } try { localStorage.setItem(this.missingBrowserSplitStorageKey, String(this._pendingMissingBrowserSplitWidth)); } catch (e) {} @@ -534,6 +541,7 @@ export const missingBrowserMethods = { this._missingBrowserSplitDetailPane = null; this._missingBrowserSplitStart = null; this._pendingMissingBrowserSplitWidth = null; + this._appliedMissingBrowserSplitWidth = null; this._lastMissingBrowserSplitApply = 0; try { document.body.style.userSelect = this._missingBrowserPrevUserSelect || '';