Moves column settings dropdown to header

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -142,7 +142,7 @@ const getClientPlatform = (): GraphPlatform => {
 
 const clientPlatform = getClientPlatform();
 
-const graphColumns: {[Key in GraphZoneType]: {name: string; hideable: boolean}} = {
+const graphColumns: { [Key in GraphZoneType]: { name: string; hideable: boolean } } = {
 	refZone: {
 		name: 'Branch / Tag',
 		hideable: false,
@@ -517,6 +517,56 @@ export function GraphWrapper({
 				) : (
 					<p>No repository is selected</p>
 				)}
+				<div className="column-bar">
+					<div className="column-bar__group">
+						<div className="column-combo">
+							<button
+								type="button"
+								aria-controls="repo-columnsettings-list"
+								aria-expanded={columnSettingsExpanded}
+								aria-haspopup="listbox"
+								id="columns-column-combo-label"
+								className="column-combo__label"
+								role="combobox"
+								onClick={() => handleToggleColumnSettings()}
+							>
+								<span
+									className="codicon codicon-settings-gear columnsettings__icon"
+									aria-label="Column Settings"
+								></span>
+							</button>
+							<div
+								className="column-combo__list"
+								id="columns-column-combo-list"
+								role="listbox"
+								tabIndex={-1}
+								aria-labelledby="columns-column-combo-label"
+							>
+								{Object.entries(graphColumns).map(
+									([graphZoneType, column]) =>
+										column.hideable && (
+											<span
+												className="column-combo__item"
+												role="option"
+												data-value={graphZoneType}
+												id={`column-column-combo-item-${graphZoneType}`}
+												key={`column-column-combo-item-${graphZoneType}`}
+												aria-checked={false}
+												onClick={() => handleSelectColumn(graphZoneType as GraphZoneType)}
+											>
+												<span
+													className={`column-combo__item-check${
+														!graphColSettings[graphZoneType]?.isHidden ? ' icon--check' : ''
+													}`}
+												/>
+												{column.name}{' '}
+											</span>
+										),
+								)}
+							</div>
+						</div>
+					</div>
+				</div>
 			</main>
 			<footer className={`actionbar graph-app__footer${!isAllowed ? ' is-gated' : ''}`} aria-hidden={!isAllowed}>
 				<div className="actionbar__group">
@@ -581,43 +631,6 @@ export function GraphWrapper({
 							showing {graphRows.length} item{graphRows.length ? 's' : ''}
 						</span>
 					)}
-					<div className="actioncombo">
-						<button
-							type="button"
-							aria-controls="repo-columnsettings-list"
-							aria-expanded={columnSettingsExpanded}
-							aria-haspopup="listbox"
-							id="columns-actioncombo-label"
-							className="actioncombo__label"
-							role="combobox"
-							onClick={() => handleToggleColumnSettings()}
-						>
-							<span className="codicon codicon-settings-gear columnsettings__icon" aria-label="Column Settings"></span>
-						</button>
-						<div
-							className="actioncombo__list"
-							id="columns-actioncombo-list"
-							role="listbox"
-							tabIndex={-1}
-							aria-labelledby="columns-actioncombo-label"
-						>
-							{
-								Object.entries(graphColumns).map(([graphZoneType, column]) => column.hideable && (
-									<span
-										className="actioncombo__item"
-										role="option"
-										data-value={graphZoneType}
-										id={`column-actioncombo-item-${graphZoneType}`}
-										key={`column-actioncombo-item-${graphZoneType}`}
-										aria-checked={false}
-										onClick={() => handleSelectColumn(graphZoneType as GraphZoneType)}
-									>
-										{column.name} {!graphColSettings[graphZoneType]?.isHidden && <span className='icon--check' />}
-									</span>
-								))
-							}
-						</div>
-					</div>
 					{isLoading && (
 						<span className="actionbar__loading">
 							<span className="icon--loading icon-modifier--spin" />

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

@@ -143,6 +143,143 @@ a {
 	}
 }
 
+.column-bar {
+	--column-bar-height: 22px;
+
+	position: absolute;
+	top: 0;
+	right: 2px;
+	z-index: 10;
+
+	background-color: var(--actionbar-background-color);
+	color: var(--color-foreground);
+	padding: 0;
+	margin: 0;
+	height: var(--column-bar-height);
+
+	&,
+	&__group {
+		display: flex;
+		flex-direction: row;
+		// justify-content: space-between;
+		align-items: center;
+		// gap: 0.75rem;
+
+		> * {
+			margin: 0;
+		}
+	}
+
+	a {
+		color: inherit;
+	}
+
+	:focus {
+		outline: 1px solid var(--vscode-focusBorder);
+		outline-offset: -1x;
+	}
+}
+
+.column-combo {
+	$block: &;
+	$block-expanded: #{$block}--expanded;
+
+	--column-combo-height: 22px;
+	--column-combo-items: 1;
+	--column-combo-items-height: 2.2rem;
+
+	position: relative;
+	display: inline-flex;
+	flex-direction: row;
+	align-items: stretch;
+	font-size: 1.1rem;
+	gap: 0.25rem;
+	height: var(--column-combo-height);
+	line-height: var(--column-combo-height);
+
+	&__label {
+		appearance: none;
+		font-family: inherit;
+		background-color: transparent;
+		border: none;
+		color: var(--text-disabled, hsla(0, 0%, 100%, 0.4));
+		margin: 0;
+		padding: 0;
+		height: var(--column-combo-height);
+		cursor: pointer;
+		background-color: var(--actionbar-background-color);
+		text-align: left;
+
+		&:hover {
+			background-color: var(--actionbar-hover-background-color);
+		}
+
+		&[disabled] {
+			pointer-events: none;
+			opacity: 0.5;
+		}
+
+		.codicon[class*='codicon-'] {
+			font-size: inherit;
+		}
+	}
+
+	&__item {
+		appearance: none;
+		font-family: inherit;
+		background-color: transparent;
+		border: none;
+		color: inherit;
+		padding: 0 0.75rem;
+		font-size: 1.3rem;
+		height: var(--column-combo-items-height);
+		line-height: var(--column-combo-items-height);
+		cursor: pointer;
+		background-color: var(--actionbar-background-color);
+		text-align: left;
+
+		&:hover {
+			background-color: var(--actionbar-hover-background-color);
+		}
+
+		&[disabled] {
+			pointer-events: none;
+			opacity: 0.5;
+		}
+
+		&-check {
+			display: inline-flex;
+			width: 16px;
+			height: 16px;
+			margin-right: 0.25rem;
+		}
+	}
+
+	&__icon.codicon[class*='codicon-'] {
+		margin-right: 0.25rem;
+	}
+
+	&__list {
+		position: absolute;
+		right: 0;
+		top: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: stretch;
+		min-width: 100%;
+		width: max-content;
+		z-index: 100;
+		background-color: var(--actionbar-background-color);
+	}
+
+	&__label:not([aria-expanded='true']) + &__list {
+		display: none;
+	}
+
+	&__item {
+	}
+}
+
 .alert {
 	--alert-foreground: var(--color-alert-foreground);
 	--alert-background: var(--color-alert-infoBackground);
@@ -415,6 +552,7 @@ a {
 	&__main {
 		flex: 1 1 auto;
 		overflow: hidden;
+		position: relative;
 	}
 
 	&__main.is-gated {