From c3e83112980a2a05d417a636f56bc98d12e6fe3f Mon Sep 17 00:00:00 2001 From: AleksanderBodurri Date: Mon, 21 Jun 2021 18:57:47 -0400 Subject: [PATCH] fix(devtools): use visible gutter size in calculation for split area flex basis' (rangle/angular-devtools#857) After PR rangle/angular-devtools#618, an invisible gutter was introduced to increase the draggable area of the split pane gutter. The gutter size being used in the calculation for the split area flex-basis still referenced the size of the now invisible gutter, causing split areas to be smaller than they should be. This is most noticable in the the input/output/state expandable panels in the property explorer tab. Now the visible gutter size is used in the flex-basis calculation instead of the invisible one. --- .../vendor/angular-split/lib/component/split.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts b/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts index cfd185bb3d8..1ead766a13b 100644 --- a/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts +++ b/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component.ts @@ -448,7 +448,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } // Multiple areas > use each percent basis else { - const sumGutterSize = this.getNbGutters() * this.gutterSize!; + // Size in pixels + const visibleGutterSize = 1; + // Use visible gutter size in calculation instead of the invisible draggable gutter + const sumGutterSize = this.getNbGutters() * visibleGutterSize; this.displayedAreas.forEach((area) => { area.component.setStyleFlex(