Fixes graph resize flicker after Visual History toggle

 - Keeps the graph mounted while timeline mode is shown, avoiding the remount cascade that caused a visible resize jump
 - Reasserts hidden styling where flex/grid display rules could override it, so the inactive pane stays out of layout

Author: eamodio

src/webviews/apps/plus/graph/graph-app.ts

@@ -424,6 +424,10 @@ export class GraphApp extends SignalWatcher(LitElement) {
 	private renderGraphPaneContent() {
 		const displayMode: GraphDisplayMode = this.graphState.displayMode ?? 'graph';
 		const isTimeline = displayMode === 'timeline';
+		// Always render the graph subtree to avoid the cascade of remounts (split-panels +
+		// React root + GK GraphContainer) that produces a visible "smaller, then bigger"
+		// resize when returning from Visual History. Mirrors the always-render pattern used
+		// by `renderDetailsPanel`. Timeline still mounts/unmounts on demand.
 		return html`
 			<div class="graph__graph-pane-body">
 				${when(
@@ -438,11 +442,10 @@ export class GraphApp extends SignalWatcher(LitElement) {
 							@gl-graph-sidebar-display-mode-change=${this.handleDisplayModeChange}
 						></gl-graph-sidebar>`,
 				)}
-				${isTimeline
-					? html`<div class="graph__graph-content">${this.renderTimelineMain()}</div>`
-					: this.graphState.config?.sidebar
-						? this.renderSidebarSplit()
-						: html`<div class="graph__graph-content">${this.renderGraphMain()}</div>`}
+				${this.graphState.config?.sidebar
+					? this.renderSidebarSplit(isTimeline)
+					: html`<div class="graph__graph-content" ?hidden=${isTimeline}>${this.renderGraphMain()}</div>`}
+				${isTimeline ? html`<div class="graph__graph-content">${this.renderTimelineMain()}</div>` : nothing}
 			</div>
 		`;
 	}
@@ -456,12 +459,13 @@ export class GraphApp extends SignalWatcher(LitElement) {
 		></gl-graph-timeline>`;
 	}
 
-	private renderSidebarSplit() {
+	private renderSidebarSplit(hidden = false) {
 		const isOpen = (this.graphState.sidebarVisible ?? false) && this.graphState.activeSidebarPanel != null;
 		const sidebarPosition = this.graphState.sidebarPosition ?? sidebarDefaultPct;
 		const sidebarPinned = this.graphState.config?.sidebarPinned ?? true;
 		return html`<gl-split-panel
 			class="graph__sidebar-split"
+			?hidden=${hidden}
 			primary="start"
 			mode=${sidebarPinned ? 'split' : 'overlay'}
 			.position=${isOpen ? sidebarPosition : 0}

src/webviews/apps/plus/graph/graph.scss

@@ -1385,6 +1385,13 @@ web-graph {
 			flex: 1;
 			min-width: 0;
 		}
+
+		// Outer-document override of `:host { display: grid }` / `display: flex` —
+		// guarantees the graph subtree hides when timeline mode mounts a sibling.
+		.graph__sidebar-split[hidden],
+		.graph__graph-content[hidden] {
+			display: none !important;
+		}
 	}
 
 	&__graph-content {
@@ -1396,6 +1403,11 @@ web-graph {
 		position: relative;
 		z-index: 0;
 
+		// display: flex overrides the UA [hidden] rule; re-assert it.
+		&[hidden] {
+			display: none;
+		}
+
 		gl-graph-minimap-container {
 			position: relative;
 			// Above the gitkraken-components graph internals, which use z-indexes up to 16 —

src/webviews/apps/shared/components/split-panel/split-panel.css.ts

@@ -25,6 +25,11 @@ export const splitPanelStyles = css`
 			var(--gl-split-panel-divider-width, 4px) 1fr;
 	}
 
+	/* :host { display: grid } overrides the UA [hidden] rule; re-assert it. */
+	:host([hidden]) {
+		display: none;
+	}
+
 	:host([dragging]) {
 		user-select: none;
 	}