experiments in a post-browser web
10
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(editor): fix pane resize - override flex, use integer CSS order, hide orphan resizers

+19 -3
+19 -3
extensions/editor/editor-layout.js
··· 280 280 const paneName = this.paneOrder[i]; 281 281 const el = paneElements[paneName]; 282 282 if (el) { 283 - el.style.order = String(i); 283 + el.style.order = String(i * 2); 284 284 this.paneContainer.appendChild(el); 285 285 } 286 286 ··· 288 288 if (i < this.paneOrder.length - 1) { 289 289 const resizerKey = `${this.paneOrder[i]}-${this.paneOrder[i + 1]}`; 290 290 const resizer = this._createResizer(resizerKey); 291 - resizer.style.order = String(i) + '.5'; 291 + resizer.style.order = String(i * 2 + 1); 292 292 resizer.dataset.leftPane = this.paneOrder[i]; 293 293 resizer.dataset.rightPane = this.paneOrder[i + 1]; 294 294 this.paneContainer.appendChild(resizer); ··· 353 353 const startLeftWidth = leftEl.offsetWidth; 354 354 const startRightWidth = rightEl.offsetWidth; 355 355 356 + // Override flex on both panes so explicit widths are respected 357 + const prevLeftFlex = leftEl.style.flex; 358 + const prevRightFlex = rightEl.style.flex; 359 + leftEl.style.flex = 'none'; 360 + rightEl.style.flex = 'none'; 361 + // Set initial widths to current computed sizes 362 + leftEl.style.width = `${startLeftWidth}px`; 363 + rightEl.style.width = `${startRightWidth}px`; 364 + 356 365 document.body.style.userSelect = 'none'; 357 366 document.body.style.cursor = 'col-resize'; 358 367 ··· 435 444 el.style.width = ''; 436 445 el.style.minWidth = ''; 437 446 } 438 - this.paneContainer.querySelectorAll('.resizer').forEach(r => r.style.display = ''); 439 447 this._applyVisibility(); 440 448 } 441 449 ··· 512 520 this.annotationsPane.getElement().style.display = this.paneVisibility.annotations ? '' : 'none'; 513 521 this.annotationsResizer.style.display = this.paneVisibility.annotations ? '' : 'none'; 514 522 } 523 + 524 + // Hide resizers between hidden panes 525 + this.paneContainer.querySelectorAll('.resizer').forEach(r => { 526 + const left = r.dataset.leftPane; 527 + const right = r.dataset.rightPane; 528 + const bothVisible = this.paneVisibility[left] && this.paneVisibility[right]; 529 + r.style.display = bothVisible ? '' : 'none'; 530 + }); 515 531 516 532 // Update toggle button states 517 533 this.outlineToggleBtn.classList.toggle('active', this.paneVisibility.outline);