From 65fd1ac5547b4647ff1808799163472455f44804 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Wed, 12 Aug 2026 21:09:47 +0200
Subject: [PATCH] frontend: restore missing-browser split width synchronously
 on initial paint

In missing_browser_methods.js, apply the saved split before the first paint when
the docked panel is narrower than the last layout, instead of waiting one
animation frame. Also tighten fast-width estimation by trying
getBoundingClientRect().width when clientWidth/offsetWidth are unavailable, and
measure from the observed resize host rather than the browser element itself.
---
 web/resolver/views/missing_browser_methods.js | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/web/resolver/views/missing_browser_methods.js b/web/resolver/views/missing_browser_methods.js
index 4bf2738..9f83966 100644
--- a/web/resolver/views/missing_browser_methods.js
+++ b/web/resolver/views/missing_browser_methods.js
@@ -1268,11 +1268,25 @@ export const missingBrowserMethods = {
 
         this.cancelMissingBrowserExternalResizeRestore();
         this._missingBrowserResizeObserver?.disconnect?.();
+        const resizeHost = browser.parentElement instanceof HTMLElement
+            ? browser.parentElement
+            : browser;
+        this._missingBrowserObservedHostWidth = null;
+
+        // Apply the saved split before the browser can paint its first frame.
+        // The HTML already contains the saved detail track, but a docked panel
+        // may be narrower than the last layout. In that case the list-pinned
+        // state must be set synchronously instead of one animation frame later.
+        const initialWidth = this.getFastMissingBrowserWidthEstimate(resizeHost, { allowMeasure: true });
+        if (Number.isFinite(initialWidth) && initialWidth > 0) {
+            this.rememberMissingBrowserWidth(initialWidth);
+            this.restoreMissingBrowserSplitWidth(browser, {
+                browserWidth: initialWidth,
+                useDefault: false
+            });
+        }
+
         if (typeof ResizeObserver === 'function') {
-            const resizeHost = browser.parentElement instanceof HTMLElement
-                ? browser.parentElement
-                : browser;
-            this._missingBrowserObservedHostWidth = null;
             this._missingBrowserResizeObserver = new ResizeObserver((entries) => {
                 const observedWidth = Number(entries?.[0]?.contentRect?.width);
                 if (!Number.isFinite(observedWidth) || observedWidth <= 0) return;
@@ -1282,7 +1296,10 @@ export const missingBrowserMethods = {
                 this.rememberMissingBrowserWidth(observedWidth);
 
                 if (!Number.isFinite(previousHostWidth) || previousHostWidth <= 0) {
-                    this.scheduleMissingBrowserSplitRestore(browser, observedWidth, { useDefault: false });
+                    this.restoreMissingBrowserSplitWidth(browser, {
+                        browserWidth: observedWidth,
+                        useDefault: false
+                    });
                     return;
                 }
                 if (Math.abs(previousHostWidth - observedWidth) < 0.5) return;
@@ -1305,7 +1322,7 @@ export const missingBrowserMethods = {
                 this._missingBrowserPrewarmFrame = null;
                 if (!browser.isConnected) return;
                 if (this._missingBrowserSplitDragging) return;
-                const measuredWidth = Number(browser.clientWidth || browser.getBoundingClientRect().width);
+                const measuredWidth = Number(resizeHost.clientWidth || resizeHost.getBoundingClientRect().width);
                 this.rememberMissingBrowserWidth(measuredWidth);
                 this.scheduleMissingBrowserSplitRestore(browser, measuredWidth, { useDefault: false });
             });
@@ -1382,20 +1399,26 @@ export const missingBrowserMethods = {
     },
 
     getFastMissingBrowserWidthEstimate(browser = null, { allowMeasure = false } = {}) {
-        const observedWidth = Number(this._missingBrowserObservedWidth);
-        if (Number.isFinite(observedWidth) && observedWidth > 0) return observedWidth;
-
-        const lastWidth = Number(this._missingBrowserLastBrowserWidth);
-        if (Number.isFinite(lastWidth) && lastWidth > 0) return lastWidth;
-
         if (allowMeasure && browser instanceof HTMLElement) {
             const clientWidth = Number(browser.clientWidth || browser.offsetWidth);
             if (Number.isFinite(clientWidth) && clientWidth > 0) {
                 this.rememberMissingBrowserWidth(clientWidth);
                 return clientWidth;
             }
+
+            const rectWidth = Number(browser.getBoundingClientRect?.().width);
+            if (Number.isFinite(rectWidth) && rectWidth > 0) {
+                this.rememberMissingBrowserWidth(rectWidth);
+                return rectWidth;
+            }
         }
 
+        const observedWidth = Number(this._missingBrowserObservedWidth);
+        if (Number.isFinite(observedWidth) && observedWidth > 0) return observedWidth;
+
+        const lastWidth = Number(this._missingBrowserLastBrowserWidth);
+        if (Number.isFinite(lastWidth) && lastWidth > 0) return lastWidth;
+
         const fallbackWidth = Number(this._queueSplitLastContainerWidth || window.innerWidth || 720);
         return Number.isFinite(fallbackWidth) && fallbackWidth > 0 ? fallbackWidth : 720;
     },