From c48acad04b208f1611f814bc73f206b2458890a8 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 29 Jun 2025 17:21:43 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkTl.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkTl.vue b/packages/frontend/src/components/MkTl.vue
index a15561d9e0..8e24294c22 100644
--- a/packages/frontend/src/components/MkTl.vue
+++ b/packages/frontend/src/components/MkTl.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.left">
 			<slot v-if="item.type === 'event'" name="left" :event="item.data" :timestamp="item.timestamp" :delta="item.delta"></slot>
 		</div>
-		<div :class="[$style.center, item.type === 'date' ? $style.date : '']">
+		<div :class="[$style.center, item.type === 'date' ? $style.date : '', i === 0 ? $style.first : '', i === items.length - 1 ? $style.last : '']">
 			<div :class="$style.centerLine"></div>
 			<div :class="$style.centerPoint"></div>
 		</div>
@@ -143,6 +143,22 @@ const items = computed<TlItem<T>[]>(() => {
 			border-radius: 50%;
 		}
 	}
+
+	&.first {
+		.centerLine {
+			height: 50%;
+			top: auto;
+			bottom: 0;
+		}
+	}
+
+	&.last {
+		.centerLine {
+			height: 50%;
+			top: 0;
+			bottom: auto;
+		}
+	}
 }
 
 .centerLine {