From 9a150964f235ebe80338e2bca34fe2d3a2de4980 Mon Sep 17 00:00:00 2001
From: Sergei Shmakov <sergei.shmakov@gitkraken.com>
Date: Tue, 14 Jul 2026 17:47:08 +0200
Subject: [PATCH 1/2] Optimizes graph columns for narrow layouts

Automatically adjusts column visibility and mode when the graph view is horizontally constrained.

Hides SHA and Changes columns, and sets the Graph column to compact mode to improve space utilization. Related column commands in context menus are disabled, and an informational message is displayed to explain the automatic adjustments.

Ensures these layout-driven overrides are not persisted as user preferences, preserving custom column settings for wider graph views.

(#5500, #5391)
---
 contributions.json                            |  21 ++-
 package.json                                  | 130 ++++++++-------
 src/constants.commands.generated.ts           |   1 +
 src/webviews/apps/plus/graph/graph-app.ts     |  10 ++
 .../plus/graph/graph-wrapper/graph-wrapper.ts | 155 +++++++++++++++++-
 5 files changed, 253 insertions(+), 64 deletions(-)

diff --git a/contributions.json b/contributions.json
index d2b91ed59fda4..2182f0121bd80 100644
--- a/contributions.json
+++ b/contributions.json
@@ -3016,7 +3016,7 @@
 		},
 		"gitlens.graph.columnChangesOff": {
 			"label": "Hide Changes Column",
-			"enablement": "webviewItemValue =~ /\\bcolumns:canHide\\b/",
+			"enablement": "webviewItemValue =~ /\\bcolumns:canHide\\b/ && !(webviewItemValue =~ /\\bcolumns:narrow\\b/)",
 			"menus": {
 				"webview/context": [
 					{
@@ -3029,6 +3029,7 @@
 		},
 		"gitlens.graph.columnChangesOn": {
 			"label": "Show Changes Column",
+			"enablement": "!(webviewItemValue =~ /\\bcolumns:narrow\\b/)",
 			"menus": {
 				"webview/context": [
 					{
@@ -3066,6 +3067,7 @@
 		},
 		"gitlens.graph.columnGraphCompact": {
 			"label": "Use Compact Graph Column",
+			"enablement": "!(webviewItemValue =~ /\\bcolumns:narrow\\b/)",
 			"menus": {
 				"webview/context": [
 					{
@@ -3078,6 +3080,7 @@
 		},
 		"gitlens.graph.columnGraphDefault": {
 			"label": "Use Expanded Graph Column",
+			"enablement": "!(webviewItemValue =~ /\\bcolumns:narrow\\b/)",
 			"menus": {
 				"webview/context": [
 					{
@@ -3165,7 +3168,7 @@
 		},
 		"gitlens.graph.columnShaOff": {
 			"label": "Hide SHA Column",
-			"enablement": "webviewItemValue =~ /\\bcolumns:canHide\\b/",
+			"enablement": "webviewItemValue =~ /\\bcolumns:canHide\\b/ && !(webviewItemValue =~ /\\bcolumns:narrow\\b/)",
 			"menus": {
 				"webview/context": [
 					{
@@ -3178,6 +3181,7 @@
 		},
 		"gitlens.graph.columnShaOn": {
 			"label": "Show SHA Column",
+			"enablement": "!(webviewItemValue =~ /\\bcolumns:narrow\\b/)",
 			"menus": {
 				"webview/context": [
 					{
@@ -3188,6 +3192,19 @@
 				]
 			}
 		},
+		"gitlens.graph.columnsNarrowInfo": {
+			"label": "Some Options Return When the Graph Is Wider",
+			"enablement": "false",
+			"menus": {
+				"webview/context": [
+					{
+						"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumns:narrow\\b/",
+						"group": "1_columns",
+						"order": 0
+					}
+				]
+			}
+		},
 		"gitlens.graph.commitViaSCM": {
 			"label": "Commit via Source Control..."
 		},
diff --git a/package.json b/package.json
index bcc5b81cd7df0..91edefa484559 100644
--- a/package.json
+++ b/package.json
@@ -7809,11 +7809,12 @@
 			{
 				"command": "gitlens.graph.columnChangesOff",
 				"title": "Hide Changes Column",
-				"enablement": "webviewItemValue =~ /\\bcolumns:canHide\\b/"
+				"enablement": "webviewItemValue =~ /\\bcolumns:canHide\\b/ && !(webviewItemValue =~ /\\bcolumns:narrow\\b/)"
 			},
 			{
 				"command": "gitlens.graph.columnChangesOn",
-				"title": "Show Changes Column"
+				"title": "Show Changes Column",
+				"enablement": "!(webviewItemValue =~ /\\bcolumns:narrow\\b/)"
 			},
 			{
 				"command": "gitlens.graph.columnDateTimeOff",
@@ -7826,11 +7827,13 @@
 			},
 			{
 				"command": "gitlens.graph.columnGraphCompact",
-				"title": "Use Compact Graph Column"
+				"title": "Use Compact Graph Column",
+				"enablement": "!(webviewItemValue =~ /\\bcolumns:narrow\\b/)"
 			},
 			{
 				"command": "gitlens.graph.columnGraphDefault",
-				"title": "Use Expanded Graph Column"
+				"title": "Use Expanded Graph Column",
+				"enablement": "!(webviewItemValue =~ /\\bcolumns:narrow\\b/)"
 			},
 			{
 				"command": "gitlens.graph.columnGraphOff",
@@ -7862,11 +7865,17 @@
 			{
 				"command": "gitlens.graph.columnShaOff",
 				"title": "Hide SHA Column",
-				"enablement": "webviewItemValue =~ /\\bcolumns:canHide\\b/"
+				"enablement": "webviewItemValue =~ /\\bcolumns:canHide\\b/ && !(webviewItemValue =~ /\\bcolumns:narrow\\b/)"
 			},
 			{
 				"command": "gitlens.graph.columnShaOn",
-				"title": "Show SHA Column"
+				"title": "Show SHA Column",
+				"enablement": "!(webviewItemValue =~ /\\bcolumns:narrow\\b/)"
+			},
+			{
+				"command": "gitlens.graph.columnsNarrowInfo",
+				"title": "Some Options Return When the Graph Is Wider",
+				"enablement": "false"
 			},
 			{
 				"command": "gitlens.graph.commitViaSCM",
@@ -13611,6 +13620,10 @@
 					"command": "gitlens.graph.columnShaOn",
 					"when": "false"
 				},
+				{
+					"command": "gitlens.graph.columnsNarrowInfo",
+					"when": "false"
+				},
 				{
 					"command": "gitlens.graph.commitViaSCM",
 					"when": "false"
@@ -27183,11 +27196,6 @@
 					"when": "webviewItem =~ /gitlens:commit\\b/ && !listMultiSelection && !gitlens:readonly && !gitlens:untrusted && gitlens:ai:allowed",
 					"group": "1_gitlens_ai@10"
 				},
-				{
-					"submenu": "gitlens/graph/commit/changes",
-					"when": "webviewItem =~ /gitlens:(commit|stash|wip)\\b/ && !listMultiSelection",
-					"group": "2_gitlens_quickopen@1"
-				},
 				{
 					"command": "gitlens.graph.openCommitOnRemote",
 					"when": "webviewItem =~ /gitlens:commit\\b/ && !listMultiSelection && gitlens:repos:withRemotes",
@@ -27313,6 +27321,11 @@
 					"when": "webviewItem =~ /gitlens:(branch|commit|stash|tag|file\\b(?=.*?\\b\\+(committed|staged|unstaged)\\b))\\b/",
 					"group": "7_gitlens_a_share@1"
 				},
+				{
+					"submenu": "gitlens/graph/commit/changes",
+					"when": "webviewItem =~ /gitlens:(commit|stash|wip)\\b/ && !listMultiSelection",
+					"group": "2_gitlens_quickopen@1"
+				},
 				{
 					"command": "gitlens.discardChanges:commitDetails",
 					"when": "webviewItem =~ /gitlens:file\\b(?=.*?\\b\\+(staged|unstaged|conflict)\\b)/ && !gitlens:readonly && !gitlens:untrusted && !gitlens:hasVirtualFolders && webview == gitlens.views.commitDetails",
@@ -27503,6 +27516,11 @@
 					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/",
 					"group": "0_markers@0"
 				},
+				{
+					"command": "gitlens.graph.columnsNarrowInfo",
+					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumns:narrow\\b/",
+					"group": "1_columns@0"
+				},
 				{
 					"command": "gitlens.graph.columnAuthorOff",
 					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumn:author:visible\\b/",
@@ -27563,51 +27581,6 @@
 					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumn:sha:hidden\\b/",
 					"group": "1_columns@7"
 				},
-				{
-					"command": "gitlens.graph.columnGraphCompact",
-					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumn:graph:visible(?![^,]*\\+compact\\b)/",
-					"group": "2_columns@2"
-				},
-				{
-					"command": "gitlens.graph.columnGraphDefault",
-					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumn:graph:visible[^,]*\\+compact\\b/",
-					"group": "2_columns@2"
-				},
-				{
-					"command": "gitlens.fetchRemote:graph",
-					"when": "webviewItem =~ /gitlens:remote\\b/ && !gitlens:readonly && !gitlens:untrusted && !gitlens:hasVirtualFolders",
-					"group": "1_gitlens_actions@1"
-				},
-				{
-					"command": "gitlens.discardChanges.multi:commitDetails",
-					"when": "listMultiSelection && !gitlens:readonly && !gitlens:untrusted && !gitlens:hasVirtualFolders && webview == gitlens.views.commitDetails && webviewItemsUnion =~ /gitlens:file\\b(?=.*?\\b\\+(staged|unstaged|conflict)\\b)(?!.*?\\b\\+(committed|stashed)\\b)/",
-					"group": "1_gitlens_actions@3"
-				},
-				{
-					"command": "gitlens.discardChanges.multi:graphDetails",
-					"when": "webviewItemsUnion =~ /gitlens:file\\b(?=.*?\\b\\+(staged|unstaged|conflict)\\b)(?!.*?\\b\\+(committed|stashed)\\b)/ && listMultiSelection && !gitlens:readonly && !gitlens:untrusted && !gitlens:hasVirtualFolders && (webview == gitlens.graph || webview == gitlens.views.graph)",
-					"group": "1_gitlens_actions@3"
-				},
-				{
-					"command": "gitlens.copyRelativePathToClipboard:commitDetails",
-					"when": "webviewItem =~ /gitlens:(file|folder)\\b/ && webview == gitlens.views.commitDetails",
-					"group": "7_gitlens_cutcopypaste@2"
-				},
-				{
-					"command": "gitlens.copyRelativePathToClipboard:graphDetails",
-					"when": "webviewItem =~ /gitlens:(file|folder)\\b/ && (webview == gitlens.graph || webview == gitlens.views.graph)",
-					"group": "7_gitlens_cutcopypaste@2"
-				},
-				{
-					"command": "gitlens.graph.columnAuthorOn",
-					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumn:author:hidden\\b/",
-					"group": "1_columns@1"
-				},
-				{
-					"command": "gitlens.graph.columnChangesOff",
-					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumn:changes:visible\\b/",
-					"group": "1_columns@3"
-				},
 				{
 					"command": "gitlens.graph.setStyleAuto",
 					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && config.gitlens.graph.experimental.useNewEngine",
@@ -27623,6 +27596,16 @@
 					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && config.gitlens.graph.experimental.useNewEngine",
 					"group": "2_columns@1"
 				},
+				{
+					"command": "gitlens.graph.columnGraphCompact",
+					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumn:graph:visible(?![^,]*\\+compact\\b)/",
+					"group": "2_columns@2"
+				},
+				{
+					"command": "gitlens.graph.columnGraphDefault",
+					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumn:graph:visible[^,]*\\+compact\\b/",
+					"group": "2_columns@2"
+				},
 				{
 					"command": "gitlens.graph.setLaneDensityToCompact",
 					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && config.gitlens.graph.experimental.useNewEngine && webviewItemValue =~ /lanes:density:expanded\\b/",
@@ -27673,11 +27656,46 @@
 					"when": "webviewItem =~ /gitlens:rebase:conflict\\+file\\b(?=.*?\\+canStageIncoming\\b)/ && webview == gitlens.rebase",
 					"group": "1_conflict@2"
 				},
+				{
+					"command": "gitlens.fetchRemote:graph",
+					"when": "webviewItem =~ /gitlens:remote\\b/ && !gitlens:readonly && !gitlens:untrusted && !gitlens:hasVirtualFolders",
+					"group": "1_gitlens_actions@1"
+				},
 				{
 					"command": "gitlens.pruneRemote:graph",
 					"when": "webviewItem =~ /gitlens:remote\\b/ && !gitlens:readonly && !gitlens:untrusted",
 					"group": "1_gitlens_actions@2"
 				},
+				{
+					"command": "gitlens.discardChanges.multi:commitDetails",
+					"when": "listMultiSelection && !gitlens:readonly && !gitlens:untrusted && !gitlens:hasVirtualFolders && webview == gitlens.views.commitDetails && webviewItemsUnion =~ /gitlens:file\\b(?=.*?\\b\\+(staged|unstaged|conflict)\\b)(?!.*?\\b\\+(committed|stashed)\\b)/",
+					"group": "1_gitlens_actions@3"
+				},
+				{
+					"command": "gitlens.discardChanges.multi:graphDetails",
+					"when": "webviewItemsUnion =~ /gitlens:file\\b(?=.*?\\b\\+(staged|unstaged|conflict)\\b)(?!.*?\\b\\+(committed|stashed)\\b)/ && listMultiSelection && !gitlens:readonly && !gitlens:untrusted && !gitlens:hasVirtualFolders && (webview == gitlens.graph || webview == gitlens.views.graph)",
+					"group": "1_gitlens_actions@3"
+				},
+				{
+					"command": "gitlens.copyRelativePathToClipboard:commitDetails",
+					"when": "webviewItem =~ /gitlens:(file|folder)\\b/ && webview == gitlens.views.commitDetails",
+					"group": "7_gitlens_cutcopypaste@2"
+				},
+				{
+					"command": "gitlens.copyRelativePathToClipboard:graphDetails",
+					"when": "webviewItem =~ /gitlens:(file|folder)\\b/ && (webview == gitlens.graph || webview == gitlens.views.graph)",
+					"group": "7_gitlens_cutcopypaste@2"
+				},
+				{
+					"command": "gitlens.graph.columnAuthorOn",
+					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumn:author:hidden\\b/",
+					"group": "1_columns@1"
+				},
+				{
+					"command": "gitlens.graph.columnChangesOff",
+					"when": "webviewItem =~ /gitlens:graph:(columns|settings)\\b/ && webviewItemValue =~ /\\bcolumn:changes:visible\\b/",
+					"group": "1_columns@3"
+				},
 				{
 					"command": "gitlens.openRepoOnRemote:graph",
 					"when": "webviewItem =~ /gitlens:remote\\b/",
diff --git a/src/constants.commands.generated.ts b/src/constants.commands.generated.ts
index 12b0807b42403..a9585812adfd5 100644
--- a/src/constants.commands.generated.ts
+++ b/src/constants.commands.generated.ts
@@ -164,6 +164,7 @@ export type ContributedCommands =
 	| 'gitlens.graph.columnRefOn'
 	| 'gitlens.graph.columnShaOff'
 	| 'gitlens.graph.columnShaOn'
+	| 'gitlens.graph.columnsNarrowInfo'
 	| 'gitlens.graph.compareAncestryWithWorking'
 	| 'gitlens.graph.compareBranchWithHead'
 	| 'gitlens.graph.compareSelectedCommits.multi'
diff --git a/src/webviews/apps/plus/graph/graph-app.ts b/src/webviews/apps/plus/graph/graph-app.ts
index 939cb8e736dd1..ac83e19301673 100644
--- a/src/webviews/apps/plus/graph/graph-app.ts
+++ b/src/webviews/apps/plus/graph/graph-app.ts
@@ -2010,6 +2010,7 @@ export class GraphApp extends SignalWatcher(LitElement) {
 					: nothing}
 				<gl-graph-wrapper
 					.anchorShas=${this.activeAnchorShas}
+					.narrow=${this.isGraphViewNarrow}
 					@gl-graph-change-selection=${this.handleGraphSelectionChanged}
 					@gl-graph-change-visible-days=${this.handleGraphVisibleDaysChanged}
 					@gl-graph-filter-column=${this.handleGraphFilterColumn}
@@ -2174,6 +2175,15 @@ export class GraphApp extends SignalWatcher(LitElement) {
 		return configured === 'auto' ? this._autoEffectiveLocation : configured;
 	}
 
+	/** Whether the graph view is horizontally narrow — drives the graph-wrapper's compact-column /
+	 *  hidden-SHA overrides. Keyed off the width-driven `_autoEffectiveLocation`, which is tracked from
+	 *  the overall graph-view width (with hysteresis) regardless of where the details panel is pinned —
+	 *  so an explicit details-on-bottom pin on a wide editor is NOT treated as narrow, and a genuinely
+	 *  narrow view IS, whatever the pin. Reuses the same width breakpoint as the `auto` details decision. */
+	private get isGraphViewNarrow(): boolean {
+		return this._autoEffectiveLocation === 'bottom';
+	}
+
 	private get detailsPositionKey(): 'position' | 'bottomPosition' {
 		return this.effectiveDetailsLocation === 'bottom' ? 'bottomPosition' : 'position';
 	}
diff --git a/src/webviews/apps/plus/graph/graph-wrapper/graph-wrapper.ts b/src/webviews/apps/plus/graph/graph-wrapper/graph-wrapper.ts
index 375a335916087..d2136e5f8f82c 100644
--- a/src/webviews/apps/plus/graph/graph-wrapper/graph-wrapper.ts
+++ b/src/webviews/apps/plus/graph/graph-wrapper/graph-wrapper.ts
@@ -18,6 +18,8 @@ import type {
 	ColumnNumberBySha,
 	CssVariables,
 	GraphAvatars,
+	GraphColumnsSettings,
+	GraphContexts,
 	GraphMissingRefsMetadata,
 	GraphRef,
 	GraphRefMetadataItem,
@@ -30,6 +32,7 @@ import type {
 	ReadonlyGraphRow,
 	RowAction,
 	SelectCommitsOptions,
+	SerializedGraphItemContext,
 } from '../../../../plus/graph/protocol.js';
 import {
 	createSecondaryWipSha,
@@ -312,6 +315,12 @@ export class GlGraphWrapper extends SignalWatcher(LitElement) {
 	@property({ attribute: false })
 	anchorShas?: readonly string[];
 
+	/** Whether the graph view is narrow, driven by graph-app's width-based detection (independent of
+	 *  where the details panel is pinned). When true, the wrapper overrides columns to use compact
+	 *  graph nodes and hide the SHA column so the limited horizontal space is used effectively. */
+	@property({ attribute: false, type: Boolean })
+	narrow = false;
+
 	// Derived-highlight bookkeeping (see `getSelectedRowsProp`):
 	// - `_lastDerivedHighlight`: the anchor's projected highlight from the last render — the basis the
 	//   `onSelectionChanged` discriminator uses to tell an ECHO of our own prop from genuine user INTENT.
@@ -899,6 +908,96 @@ export class GlGraphWrapper extends SignalWatcher(LitElement) {
 		return projectShasToSelectedRows(Object.keys(pending), present, showPrimary) ?? derived;
 	}
 
+	/** Whether the graph view is narrow (width-driven, set by graph-app; independent of details-panel placement). */
+	private get isNarrowLayout(): boolean {
+		return this.narrow;
+	}
+
+	// Identity-stable cache — avoids creating a new columns object every render when the inputs
+	// (narrow flag + host columns) haven't changed, which would otherwise churn the graph
+	// component's prop diff and trigger unnecessary column ↔ zone recomputation.
+	private _effectiveColumnsCache?: {
+		narrow: boolean;
+		source: GraphColumnsSettings | undefined;
+		result: GraphColumnsSettings | undefined;
+	};
+
+	/** Returns the columns to pass to the graph component. In narrow layout, overrides the graph
+	 *  column to compact mode and hides the SHA and Changes columns so the limited horizontal space
+	 *  is used effectively. Returns the original columns unchanged in wide layout. */
+	private get effectiveColumns(): GraphColumnsSettings | undefined {
+		const columns = this.graphState.columns;
+		const narrow = this.isNarrowLayout;
+
+		// Fast-path: return the cached result when inputs haven't changed.
+		const cache = this._effectiveColumnsCache;
+		if (cache?.narrow === narrow && cache.source === columns) {
+			return cache.result;
+		}
+
+		let result = columns;
+		if (narrow && columns != null) {
+			const graphCol = columns.graph;
+			const shaCol = columns.sha;
+			const changesCol = columns.changes;
+			// Only allocate a new object when an override actually changes something.
+			const needsGraphCompact = graphCol != null && graphCol.mode !== 'compact';
+			const needsShaHidden = shaCol != null && !shaCol.isHidden;
+			const needsChangesHidden = changesCol != null && !changesCol.isHidden;
+			if (needsGraphCompact || needsShaHidden || needsChangesHidden) {
+				result = { ...columns };
+				if (needsGraphCompact) {
+					result.graph = { ...graphCol, mode: 'compact' };
+				}
+				if (needsShaHidden) {
+					result.sha = { ...shaCol, isHidden: true };
+				}
+				if (needsChangesHidden) {
+					result.changes = { ...changesCol, isHidden: true };
+				}
+			}
+		}
+
+		this._effectiveColumnsCache = { narrow: narrow, source: columns, result: result };
+		return result;
+	}
+
+	// Identity-stable cache for the narrow-transformed context (see `effectiveGraphContext`) — the
+	// React engine ingests `context` by reference (`props.context !== context`), so returning a fresh
+	// object every render would churn its state.
+	private _effectiveContextCache?: {
+		narrow: boolean;
+		source: GraphContexts | undefined;
+		result: GraphContexts | undefined;
+	};
+
+	/** Returns the `data-vscode-context` payloads to stamp on the column header and settings gear.
+	 *  When narrow, rewrites the host-computed tokens so the column context menus reflect the
+	 *  effective (overridden) state and get disabled: managed columns read as hidden/compact, and a
+	 *  `columns:narrow` token is appended, which the managed commands' `enablement` clauses key off
+	 *  (see `contributions.json`) to gray them and surface the "auto-managed" info line. */
+	private get effectiveGraphContext(): GraphContexts | undefined {
+		const context = this.graphState.context;
+		const narrow = this.isNarrowLayout;
+
+		const cache = this._effectiveContextCache;
+		if (cache?.narrow === narrow && cache.source === context) {
+			return cache.result;
+		}
+
+		let result = context;
+		if (narrow && context != null) {
+			result = {
+				...context,
+				header: transformColumnContextForNarrow(context.header),
+				settings: transformColumnContextForNarrow(context.settings),
+			};
+		}
+
+		this._effectiveContextCache = { narrow: narrow, source: context, result: result };
+		return result;
+	}
+
 	override render() {
 		const { graphState } = this;
 		const { rows: decoratedRows, showPrimary } = this.getDecoratedRows();
@@ -919,10 +1018,10 @@ export class GlGraphWrapper extends SignalWatcher(LitElement) {
 				.searchMode=${graphState.searchMode}
 				.config=${graphState.config}
 				.downstreams=${graphState.downstreams}
-				.columns=${graphState.columns}
+				.columns=${this.effectiveColumns}
 				.repoPath=${this.getRepoPath()}
-				.columnsContext=${graphState.context?.header}
-				.settingsContext=${graphState.context?.settings}
+				.columnsContext=${this.effectiveGraphContext?.header}
+				.settingsContext=${this.effectiveGraphContext?.settings}
 				.excludeRefs=${graphState.excludeRefs}
 				.excludeTypes=${graphState.excludeTypes}
 				.includeOnlyRefs=${graphState.includeOnlyRefs}
@@ -984,9 +1083,9 @@ export class GlGraphWrapper extends SignalWatcher(LitElement) {
 			.activeFilterColumns=${graphState.activeFilterColumns}
 			.activeRow=${graphState.activeRow}
 			.avatars=${graphState.avatars}
-			.columns=${graphState.columns}
+			.columns=${this.effectiveColumns}
 			.config=${graphState.config}
-			.context=${graphState.context}
+			.context=${this.effectiveGraphContext}
 			.downstreams=${graphState.downstreams}
 			.excludeRefs=${graphState.excludeRefs}
 			.excludeTypes=${graphState.excludeTypes}
@@ -1309,7 +1408,23 @@ export class GlGraphWrapper extends SignalWatcher(LitElement) {
 	}
 
 	private onColumnsChanged(event: CustomEventType<'graph-changecolumns'>) {
-		this._ipc.sendCommand(UpdateColumnsCommand, { config: event.detail.settings });
+		let config = event.detail.settings;
+		// When narrow, the wrapper overrides graph.mode → 'compact' and sha/changes.isHidden → true.
+		// Strip those overrides before persisting so the user's wide-mode preferences are preserved.
+		if (this.isNarrowLayout) {
+			const columns = this.graphState.columns;
+			config = { ...config };
+			if (columns?.graph?.mode !== 'compact' && config.graph != null) {
+				config.graph = { ...config.graph, mode: columns?.graph?.mode };
+			}
+			if (columns?.sha?.isHidden !== true && config.sha != null) {
+				config.sha = { ...config.sha, isHidden: columns?.sha?.isHidden };
+			}
+			if (columns?.changes?.isHidden !== true && config.changes != null) {
+				config.changes = { ...config.changes, isHidden: columns?.changes?.isHidden };
+			}
+		}
+		this._ipc.sendCommand(UpdateColumnsCommand, { config: config });
 	}
 
 	private onGetMoreRows({ detail: sha }: CustomEventType<'graph-morerows'>) {
@@ -2290,6 +2405,34 @@ export class GlGraphWrapper extends SignalWatcher(LitElement) {
 /** Builds a `{ sha: true }` highlight record from `shas`, keeping only those that render: a sha present
  *  in the decorated rows (`present`), or the primary WIP row when `showPrimary` (the GK auto-injects it,
  *  so it's not always in `present`). Returns `undefined` when nothing survives — the empty-highlight case. */
+/** Rewrites a serialized column-context payload (see the host's `getColumnHeaderContext`) for the
+ *  narrow layout: the managed columns' tokens are rewritten to their effective overridden state
+ *  (SHA/Changes read as hidden, the graph column as compact) so the context menu mirrors what's on
+ *  screen, and a `columns:narrow` token is appended, which the managed toggle commands' `enablement`
+ *  clauses use to disable themselves (and the "auto-managed" info line uses to appear). */
+function transformColumnContextForNarrow(
+	serialized: SerializedGraphItemContext | undefined,
+): SerializedGraphItemContext | undefined {
+	// The host always serializes these to a JSON string (`serializeWebviewItemContext`); pass any
+	// other shape through untouched.
+	if (!serialized || typeof serialized !== 'string') return serialized;
+
+	try {
+		const context = JSON.parse(serialized) as { webviewItemValue?: unknown };
+		if (typeof context.webviewItemValue !== 'string') return serialized;
+
+		context.webviewItemValue = `${context.webviewItemValue
+			.replace(/\bcolumn:sha:visible\b/, 'column:sha:hidden')
+			.replace(/\bcolumn:changes:visible\b/, 'column:changes:hidden')
+			.replace(/\bcolumn:graph:visible(\+[^,]*)?/, 'column:graph:visible+compact')},columns:narrow`;
+		return JSON.stringify(context);
+	} catch {
+		// A malformed payload just keeps the host-provided context — worst case the menu shows the
+		// stored (unmanaged) state, which is the pre-existing behavior.
+		return serialized;
+	}
+}
+
 function projectShasToSelectedRows(
 	shas: readonly string[] | undefined,
 	present: ReadonlySet<string> | undefined,

From 2bb430006ba171e6aa00f23f8a89ef210aefec27 Mon Sep 17 00:00:00 2001
From: Sergei Shmakov <sergei.shmakov@gitkraken.com>
Date: Tue, 14 Jul 2026 17:58:26 +0200
Subject: [PATCH 2/2] Adds CHANGELOG entry for narrow-graph column adjustments

(#5500, #5391)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 707b82aeb5b6c..15541ea9db167 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 - Changes the default _Commit Graph_ lane colors for dark and high-contrast themes to a new vibrant, perceptually-uniform palette &mdash; every lane shares the same perceived brightness so no lane visually dominates; light themes keep the previous colors, and any `gitlens.graphLane1Color`&ndash;`gitlens.graphLane10Color` customizations in `workbench.colorCustomizations` are still honored
 - Changes the _Commit Graph_ sidebar to be unpinned by default &mdash; the sidebar now floats over the graph and auto-collapses when it loses focus; pin it (or set `gitlens.graph.sidebar.pinned` to `true`) to restore the previous shared-space layout ([#5447](https://github.com/gitkraken/vscode-gitlens/issues/5447))
+- Changes the _Commit Graph_ to automatically use a compact graph column and hide the SHA and Changes columns when the graph is narrow &mdash; based on the graph's actual width rather than where the details panel is pinned, so your column layout for a wide graph is preserved and restored once it's wide again; while narrow, the corresponding column menu items are disabled with a note that they return when the graph is wider ([#5500](https://github.com/gitkraken/vscode-gitlens/issues/5500), [#5391](https://github.com/gitkraken/vscode-gitlens/issues/5391))
 
 ### Removed