experiments in a post-browser web
fix(editor): fix pane resize - override flex, use integer CSS order, hide orphan resizers
+19
-3
+19
-3
extensions/editor/editor-layout.js
+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);