GK graph has some visual glitches (#2776)

* Fixed problem with default VSCode "-webkit-scrollbar" css value and the graph

* Fixed problem with graph scrollbar color and themes

* Graph version bump (v10.1.8)

package.json

@@ -14574,7 +14574,7 @@
 		"vscode:prepublish": "yarn run bundle"
 	},
 	"dependencies": {
-		"@gitkraken/gitkraken-components": "10.1.7",
+		"@gitkraken/gitkraken-components": "10.1.8",
 		"@microsoft/fast-element": "1.12.0",
 		"@microsoft/fast-react-wrapper": "0.3.18",
 		"@octokit/core": "4.2.1",

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

@@ -93,6 +93,8 @@
 	--branch-status-ahead-foreground: var(--vscode-gitlens-decorations\.branchAheadForegroundColor);
 	--branch-status-behind-foreground: var(--vscode-gitlens-decorations\.branchBehindForegroundColor);
 	--branch-status-both-foreground: var(--vscode-gitlens-decorations\.branchDivergedForegroundColor);
+
+	--graph-column-scrollbar-thickness: 14px;
 }
 
 body {
@@ -112,6 +114,11 @@ body {
 	}
 }
 
+::-webkit-scrollbar {
+    width: var(--graph-column-scrollbar-thickness);
+    height: var(--graph-column-scrollbar-thickness);
+}
+
 ::-webkit-scrollbar-corner {
 	background-color: transparent !important;
 }
@@ -844,7 +851,6 @@ button:not([disabled]),
 .graph-app {
 	--fs-1: 1.1rem;
 	--fs-2: 1.3rem;
-	--scroll-thumb-bg: var(--vscode-scrollbarSlider-background);
 
 	padding: 0;
 
@@ -980,7 +986,7 @@ button:not([disabled]),
 
 	& .graph-adjust-commit-count {
 		display: flex;
-		width: calc(100vw - var(--scrollable-scrollbar-thickness));
+		width: calc(100vw - var(--graph-column-scrollbar-thickness));
 		align-items: center;
 		justify-content: center;
 	}

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

@@ -535,6 +535,9 @@ export class GraphApp extends App {
 					? `1px dashed ${getCssVariable('--color-graph-contrast-border', computedStyle)}`
 					: 'none',
 
+				'--scrollable-scrollbar-thickness': getCssVariable('--graph-column-scrollbar-thickness', computedStyle),
+				'--scroll-thumb-bg': getCssVariable('--vscode-scrollbarSlider-background', computedStyle),
+
 				'--scroll-marker-head-color': getCssVariable('--color-graph-scroll-marker-head', computedStyle),
 				'--scroll-marker-upstream-color': getCssVariable('--color-graph-scroll-marker-upstream', computedStyle),
 				'--scroll-marker-highlights-color': getCssVariable(

yarn.lock

@@ -202,10 +202,10 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@gitkraken/gitkraken-components@10.1.7":
-  version "10.1.7"
-  resolved "https://registry.yarnpkg.com/@gitkraken/gitkraken-components/-/gitkraken-components-10.1.7.tgz#bda2e6b5355000729efe3e0d5bc9e0313f137ce8"
-  integrity sha512-FpSHxtoQLP3FtDKj5mitlKX6preZ+z95YUYmcEYg6b1ZV1usuOdrMT3Nq8rNkidBR/vVGrH9RMF8Sj+EhR+FWw==
+"@gitkraken/gitkraken-components@10.1.8":
+  version "10.1.8"
+  resolved "https://registry.npmjs.org/@gitkraken/gitkraken-components/-/gitkraken-components-10.1.8.tgz#2ee9e70817d51b0928731e57e640ac49f3e7502c"
+  integrity sha512-kq6d+HVlELdFHpIMMgVuopqjX63Jtt7udW7OHbhf1Za/rrlwczX2K1a+wPYEGVQvHjaOrghTVmG/mogNhMQ0qA==
   dependencies:
     "@axosoft/react-virtualized" "9.22.3-gitkraken.3"
     classnames "2.3.2"