From ea85c5fc5ad0daba13b3509594439c0622759a73 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Fri, 18 Apr 2025 00:22:50 +0200
Subject: [PATCH] Prevent UI overlaps in transportation card

Similar to #552 (658764f) the card title and badges of the
transportation card can overlap. This patch adjusts the transportation
card to list the badges below the title similar to the other cards.
---
 .../lib/components/TransportationCard.svelte  | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/TransportationCard.svelte b/frontend/src/lib/components/TransportationCard.svelte
index 8b384e9..c97bd85 100644
--- a/frontend/src/lib/components/TransportationCard.svelte
+++ b/frontend/src/lib/components/TransportationCard.svelte
@@ -110,22 +110,20 @@
 >
 	<div class="card-body space-y-4">
 		<!-- Title and Type -->
-		<div class="flex items-center justify-between">
-			<h2 class="card-title text-lg font-semibold truncate">{transportation.name}</h2>
-			<div class="flex items-center gap-2">
-				<div class="badge badge-secondary">
-					{$t(`transportation.modes.${transportation.type}`) +
-						' ' +
-						getTransportationIcon(transportation.type)}
-				</div>
-				{#if transportation.type == 'plane' && transportation.flight_number}
-					<div class="badge badge-neutral-200">{transportation.flight_number}</div>
-				{/if}
+		<h2 class="card-title text-lg font-semibold truncate">{transportation.name}</h2>
+		<div>
+			<div class="badge badge-secondary">
+				{$t(`transportation.modes.${transportation.type}`) +
+					' ' +
+					getTransportationIcon(transportation.type)}
 			</div>
+			{#if transportation.type == 'plane' && transportation.flight_number}
+				<div class="badge badge-neutral-200">{transportation.flight_number}</div>
+			{/if}
+			{#if unlinked}
+				<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
+			{/if}
 		</div>
-		{#if unlinked}
-			<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
-		{/if}
 
 		<!-- Locations -->
 		<div class="space-y-2">