Fixes icons on chart

Author: eamodio

src/webviews/apps/plus/timeline/components/chart.css.ts

@@ -348,7 +348,7 @@ export const timelineChartStyles = css`
 		font-family: var(--font-family);
 	}
 
-	:host-context(:host[placement='view']) .bb .bb-button {
+	:host-context([data-placement='view']) .bb .bb-button {
 		margin-right: 2.8rem;
 	}
 
@@ -392,7 +392,7 @@ export const timelineChartStyles = css`
 		opacity: 0;
 	}
 
-	:host-context(:host[placement='view']) .notice--blur {
+	:host-context([data-placement='view']) .notice--blur {
 		animation-delay: 0.5s;
 	}
 
@@ -477,25 +477,25 @@ export const timelineChartStyles = css`
 		white-space: pre-line;
 	}
 
-	:host-context(:host[placement='editor']) .bb-axis-y .tick text {
+	:host-context([data-placement='editor']) .bb-axis-y .tick text {
 		fill: var(--color-foreground--85);
 	}
 
-	:host-context(:host[placement='view']) .bb-axis-y .tick text {
+	:host-context([data-placement='view']) .bb-axis-y .tick text {
 		transform: translate(0, 0.4rem);
 		font-family: codicon;
 		font-size: 1.5rem;
 	}
 
 	@media (max-height: 275px) {
-		:host-context(:host[placement='view']) .bb-axis-y .tick text {
+		:host-context([data-placement='view']) .bb-axis-y .tick text {
 			transform: none;
 			font-size: 1rem;
 		}
 	}
 
 	@media (max-height: 225px) {
-		:host-context(:host[placement='view']) .bb-axis-y .tick text {
+		:host-context([data-placement='view']) .bb-axis-y .tick text {
 			display: none;
 		}
 	}

src/webviews/apps/plus/timeline/components/chart.ts

@@ -158,13 +158,6 @@ export class GlTimelineChart extends GlElement {
 		super.disconnectedCallback();
 	}
 
-	// override firstUpdated(changedProperties: PropertyValues): void {
-	// 	if (!changedProperties.has('dataPromise')) {
-	// 		this.updateChart();
-	// 	}
-	// 	super.firstUpdated(changedProperties);
-	// }
-
 	override update(changedProperties: PropertyValues): void {
 		if (changedProperties.has('dataPromise') || this.dataPromise == null) {
 			this.updateChart();
@@ -765,7 +758,11 @@ export class GlTimelineChart extends GlElement {
 							padding: { top: 75, bottom: 75 },
 							tick: {
 								format: (y: number) => {
-									if (this.compact) return this.sliceBy === 'branch' ? '\u{EA68}' : '\u{EB99}';
+									if (this.compact) {
+										return this.sliceBy === 'branch'
+											? '\u{EA68}' /* git-branch codicon */
+											: '\u{EB99}' /* account codicon */;
+									}
 									return truncateMiddle(this._slicesByIndex.get(y) ?? '', 30);
 								},
 								outer: true,