From b26b30d8d08e014a12ed1ba2119e5469a9708c36 Mon Sep 17 00:00:00 2001
From: ndom91 <yo@ndo.dev>
Date: Thu, 17 Oct 2024 11:03:52 +0200
Subject: [PATCH] fix: ensure commit-lines.css works for both stacking/original
 lanes

---
 .../ui/src/styles/components/commit-lines.css | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/styles/components/commit-lines.css b/packages/ui/src/styles/components/commit-lines.css
index 0c5927d80..8c828dc12 100644
--- a/packages/ui/src/styles/components/commit-lines.css
+++ b/packages/ui/src/styles/components/commit-lines.css
@@ -3,41 +3,42 @@
 	width: 100%;
 	height: 100%;
 
-	--background-color: var(--clr-commit-shadow);
+	--border-color: var(--clr-commit-shadow);
+	--border-style: solid;
 
 	&.none {
-		--background-color: transparent;
+		--border-color: transparent;
 	}
 
 	&.remote {
-		--background-color: var(--clr-commit-remote);
+		--border-color: var(--clr-commit-remote);
 	}
 
 	&.local {
-		--background-color: var(--clr-commit-local);
+		--border-color: var(--clr-commit-local);
 	}
 
 	&.local-and-remote {
-		--background-color: var(--clr-commit-remote);
+		--border-color: var(--clr-commit-remote);
 	}
 
 	&.local-shadow {
-		--background-color: var(--clr-commit-local);
+		--border-color: var(--clr-commit-local);
 	}
 
 	&.shadow {
-		--background-color: var(--clr-commit-shadow);
+		--border-color: var(--clr-commit-shadow);
 	}
 
 	&.upstream {
-		--background-color: var(--clr-commit-upstream);
+		--border-color: var(--clr-commit-upstream);
 	}
 
 	&.integrated {
-		--background-color: var(--clr-commit-shadow);
+		--border-color: var(--clr-commit-shadow);
 
 		&.stacked {
-			--background-color: var(--clr-commit-integrated);
+			--border-color: var(--clr-commit-integrated);
 		}
 	}
 
@@ -48,18 +49,23 @@
 		right: 0;
 		width: 2px;
 		height: 100%;
-		background: var(--background-color);
+	}
+
+	&.stacked:before {
+		background: var(--border-color);
 	}
 
 	&.dashed {
+		--border-style: none;
+
 		&:before {
 			height: calc(100% + 1px);
 			background: repeating-linear-gradient(
 				0,
 				transparent,
 				transparent 2px,
-				var(--background-color) 2px,
-				var(--background-color) 4px
+				var(--border-color) 2px,
+				var(--border-color) 4px
 			);
 		}
 	}