From f7e548906b3aeccdba559e9550b7bcab0370587d Mon Sep 17 00:00:00 2001
From: Maarten <maartenzam@gmail.com>
Date: Thu, 17 Oct 2024 21:45:13 +0200
Subject: [PATCH] Key events on edge of chart visible

---
 src/lib/components/Timeline.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
index f2f8ab5..4f9fe2e 100644
--- a/src/lib/components/Timeline.svelte
+++ b/src/lib/components/Timeline.svelte
@@ -267,12 +267,12 @@
 		</svg>
 	</div>
 
-	<svg {width} height={height / 2}>
+	<svg class="key-events-svg" {width} height={height / 2}>
 		{#if xScale}
 			<g transform={`translate(${marginsKeyEvents.left},${marginsKeyEvents.top})`}>
 				<line
 					x1={0}
-					x2={width}
+					x2={width - marginsKeyEvents.left}
 					y1={32}
 					y2={32}
 					style:stroke={keyEventColor}
@@ -340,4 +340,7 @@
 	.y-tick {
 		font-size: 0.9rem;
 	}
+	.key-events-svg {
+		overflow: visible;
+	}
 </style>