From 1d5dc14d3425a94c6c31ce6fd46528f96514df1f Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Tue, 14 Apr 2026 19:31:35 +0200
Subject: [PATCH] fix: styling issues with wrapping for timeline events

---
 .../issues/detail/issue-detail-activity.tsx   | 26 +++++++++----------
 .../pulls/detail/pull-detail-activity.tsx     | 26 +++++++++----------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/apps/dashboard/src/components/issues/detail/issue-detail-activity.tsx b/apps/dashboard/src/components/issues/detail/issue-detail-activity.tsx
index 960c9b7..5ed9d06 100644
--- a/apps/dashboard/src/components/issues/detail/issue-detail-activity.tsx
+++ b/apps/dashboard/src/components/issues/detail/issue-detail-activity.tsx
@@ -859,7 +859,7 @@ function ActorMention({
 				<img
 					src={actor.avatarUrl}
 					alt={login}
-					className="inline-block size-3.5 rounded-full border border-border align-text-bottom"
+					className="inline-block size-3.5 rounded-full border border-border align-text-bottom self-start"
 				/>
 			)}
 			{login}
@@ -875,7 +875,7 @@ function getIssueEventDescription(event: TimelineEvent): React.ReactNode {
 	switch (event.event) {
 		case "labeled":
 			return (
-				<span className="flex items-center gap-1.5">
+				<span className="flex items-center gap-1.5 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" added "}
 					{event.label && (
@@ -889,7 +889,7 @@ function getIssueEventDescription(event: TimelineEvent): React.ReactNode {
 			);
 		case "unlabeled":
 			return (
-				<span className="flex items-center gap-1.5">
+				<span className="flex items-center gap-1.5 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" removed "}
 					{event.label && (
@@ -903,7 +903,7 @@ function getIssueEventDescription(event: TimelineEvent): React.ReactNode {
 			);
 		case "assigned":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" assigned "}
 					<ActorMention actor={event.assignee} />
@@ -911,7 +911,7 @@ function getIssueEventDescription(event: TimelineEvent): React.ReactNode {
 			);
 		case "unassigned":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" unassigned "}
 					<ActorMention actor={event.assignee} />
@@ -919,7 +919,7 @@ function getIssueEventDescription(event: TimelineEvent): React.ReactNode {
 			);
 		case "renamed":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" changed the title from "}
 					<span className="line-through">{event.rename?.from}</span>
@@ -931,14 +931,14 @@ function getIssueEventDescription(event: TimelineEvent): React.ReactNode {
 			);
 		case "closed":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" closed this"}
 				</span>
 			);
 		case "reopened":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" reopened this"}
 				</span>
@@ -948,7 +948,7 @@ function getIssueEventDescription(event: TimelineEvent): React.ReactNode {
 			if (!event.source) return null;
 			const prefix = event.source.type === "pull_request" ? "PR" : "Issue";
 			return (
-				<span className="inline-flex flex-wrap items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} />
 					{" mentioned this in "}
 					<span className="font-medium text-foreground">
@@ -962,7 +962,7 @@ function getIssueEventDescription(event: TimelineEvent): React.ReactNode {
 		}
 		case "milestoned":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" added this to the "}
 					<span className="font-medium text-foreground">
@@ -973,7 +973,7 @@ function getIssueEventDescription(event: TimelineEvent): React.ReactNode {
 			);
 		case "demilestoned":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" removed this from the "}
 					<span className="font-medium text-foreground">
@@ -984,7 +984,7 @@ function getIssueEventDescription(event: TimelineEvent): React.ReactNode {
 			);
 		case "review_requested":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" requested review from "}
 					<ActorMention actor={reviewer} />
@@ -992,7 +992,7 @@ function getIssueEventDescription(event: TimelineEvent): React.ReactNode {
 			);
 		case "review_request_removed":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" removed review request for "}
 					<ActorMention actor={reviewer} />
diff --git a/apps/dashboard/src/components/pulls/detail/pull-detail-activity.tsx b/apps/dashboard/src/components/pulls/detail/pull-detail-activity.tsx
index 2513974..41ad26b 100644
--- a/apps/dashboard/src/components/pulls/detail/pull-detail-activity.tsx
+++ b/apps/dashboard/src/components/pulls/detail/pull-detail-activity.tsx
@@ -2664,7 +2664,7 @@ function ActorMention({
 				<img
 					src={actor.avatarUrl}
 					alt={login}
-					className="inline-block size-3.5 rounded-full border border-border align-text-bottom"
+					className="inline-block size-3.5 rounded-full border border-border align-text-bottom self-start"
 				/>
 			)}
 			{login}
@@ -2683,7 +2683,7 @@ function getEventDescription(
 	switch (event.event) {
 		case "labeled":
 			return (
-				<span className="flex items-center gap-1.5">
+				<span className="flex items-center gap-1.5 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" added "}
 					{event.label && (
@@ -2697,7 +2697,7 @@ function getEventDescription(
 			);
 		case "unlabeled":
 			return (
-				<span className="flex items-center gap-1.5">
+				<span className="flex items-center gap-1.5 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" removed "}
 					{event.label && (
@@ -2711,7 +2711,7 @@ function getEventDescription(
 			);
 		case "assigned":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" assigned "}
 					<ActorMention actor={event.assignee} />
@@ -2719,7 +2719,7 @@ function getEventDescription(
 			);
 		case "unassigned":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" unassigned "}
 					<ActorMention actor={event.assignee} />
@@ -2727,7 +2727,7 @@ function getEventDescription(
 			);
 		case "review_requested":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" requested review from "}
 					<ActorMention actor={reviewer} />
@@ -2735,7 +2735,7 @@ function getEventDescription(
 			);
 		case "review_request_removed":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" removed review request for "}
 					<ActorMention actor={reviewer} />
@@ -2758,7 +2758,7 @@ function getEventDescription(
 		}
 		case "renamed":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" changed the title from "}
 					<span className="line-through">{event.rename?.from}</span>
@@ -2787,7 +2787,7 @@ function getEventDescription(
 			if (!event.source) return null;
 			const prefix = event.source.type === "pull_request" ? "PR" : "Issue";
 			return (
-				<span className="inline-flex flex-wrap items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} />
 					{" mentioned this in "}
 					<span className="font-medium text-foreground">
@@ -2801,7 +2801,7 @@ function getEventDescription(
 		}
 		case "milestoned":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" added this to the "}
 					<span className="font-medium text-foreground">
@@ -2812,7 +2812,7 @@ function getEventDescription(
 			);
 		case "demilestoned":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" removed this from the "}
 					<span className="font-medium text-foreground">
@@ -2837,7 +2837,7 @@ function getEventDescription(
 			);
 		case "head_ref_deleted":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" deleted "}
 					<code className="rounded bg-surface-1 px-1 py-0.5 font-mono text-[10px] text-muted-foreground">
@@ -2848,7 +2848,7 @@ function getEventDescription(
 			);
 		case "head_ref_restored":
 			return (
-				<span className="inline-flex items-center gap-1">
+				<span className="inline-flex items-center gap-1 flex-wrap">
 					<ActorMention actor={event.actor} hideAvatar />
 					{" restored "}
 					<code className="rounded bg-surface-1 px-1 py-0.5 font-mono text-[10px] text-muted-foreground">