| @@ -113,8 +113,11 @@ | ||
| 113 | 113 | @media (min-width: <?php echo (int) self::DESKTOP; ?>px) { |
| 114 | 114 | /* useLayoutShift takes body out of flow, so core's admin-bar |
| 115 | 115 | html margin disappears. */ |
| 116 | 116 | html.extendify-agent-skeleton { margin-top: 0 !important; } |
| 117 | + /* The mounted Agent drops the page scrollbars; classic ones would shift everything on mount. */ | |
| 118 | + html.extendify-agent-skeleton { scrollbar-width: none; } | |
| 119 | + html.extendify-agent-skeleton::-webkit-scrollbar { display: none; } | |
| 117 | 120 | /* tan(atan2()) is the only way to divide two lengths in CSS. */ |
| 118 | 121 | .extendify-agent-skeleton .wp-site-blocks { |
| 119 | 122 | transform-origin: top left; |
| 120 | 123 | transform: translateX(<?php echo (int) self::WIDTH; ?>px) translateY(<?php echo (int) self::TOP; ?>px) scale(tan(atan2(calc(100vw - <?php echo (int) self::WIDTH; ?>px), 100vw))); |
| @@ -137,9 +140,11 @@ | ||
| 137 | 140 | clip-path: inset(-9999px -9999px -<?php echo (int) self::FRAME; ?>px -9999px); |
| 138 | 141 | pointer-events: none; |
| 139 | 142 | z-index: 100000; |
| 140 | 143 | } |
| 141 | - .extendify-agent-skeleton #extendify-agent-skeleton { | |
| 144 | + /* Set by doReload (src/Agent/lib/reload.js) before a reload. */ | |
| 145 | + .extendify-agent-skeleton #extendify-agent-skeleton, | |
| 146 | + .extendify-agent-reloading #extendify-agent-skeleton { | |
| 142 | 147 | display: block; |
| 143 | 148 | position: fixed; |
| 144 | 149 | top: 0; |
| 145 | 150 | bottom: var(--extendify-notification-bar-height, 0px); |
| @@ -236,11 +241,10 @@ | ||
| 236 | 241 | . 'var q=JSON.parse(localStorage.getItem(%3$s));' |
| 237 | 242 | . 'if(q&&q.state&&q.state.on){r.classList.add("extendify-quick-edit-on")}' |
| 238 | 243 | // Left on, it re-offsets the page when the panel closes and clears its styles. |
| 239 | 244 | . 'var t=Date.now();' |
| 240 | - . 'var d=function(){r.classList.remove("extendify-agent-skeleton");' | |
| 241 | - . 'var a=document.getElementById("extendify-agent-skeleton");if(a){a.remove()}' | |
| 242 | - . 'var b=document.getElementById("extendify-agent-skeleton-frame");if(b){b.remove()}};' | |
| 245 | + // Only hides the rail; doReload shows it again before a reload. | |
| 246 | + . 'var d=function(){r.classList.remove("extendify-agent-skeleton")};' | |
| 243 | 247 | . 'var i=setInterval(function(){' |
| 244 | 248 | . 'if(!document.getElementById("extendify-agent-sidebar")){return}' |
| 245 | 249 | . 'clearInterval(i);setTimeout(d,Math.max(0,%4$d-(Date.now()-t)))},50);' |
| 246 | 250 | . 'setTimeout(function(){clearInterval(i);d()},10000)}catch(e){}', |
| @@ -278,9 +282,9 @@ | ||
| 278 | 282 | <div class="ext-skeleton-icon"></div> |
| 279 | 283 | </div> |
| 280 | 284 | </div> |
| 281 | 285 | <div class="relative z-50 flex h-full flex-col justify-between overflow-auto"> |
| 282 | - <div class="relative grow overflow-y-auto overflow-x-hidden p-2 flex items-center justify-center"> | |
| 286 | + <div class="relative grow overflow-y-auto overflow-x-hidden p-2 flex items-center justify-center" style="scrollbar-gutter: stable"> | |
| 283 | 287 | <div class="ext-skeleton-bars"><span></span><span></span><span></span></div> |
| 284 | 288 | </div> |
| 285 | 289 | <div> |
| 286 | 290 | <div class="relative flex flex-col px-4 pb-2 pt-2.5 shadow-lg-flipped"></div> |
