From 01f08361733ec5ce5fe2e2e69711fc9442e9cd9b Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 22 Jan 2026 10:06:51 +0700
Subject: [PATCH] Move transport icons to bottom of HubCard

---
 app/components/catalog/HubCard.vue | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/components/catalog/HubCard.vue b/app/components/catalog/HubCard.vue
index 3b15515..fb0bca6 100644
--- a/app/components/catalog/HubCard.vue
+++ b/app/components/catalog/HubCard.vue
@@ -16,16 +16,8 @@
       ]"
     >
       <div class="flex flex-col gap-1">
-        <!-- Title + Transport icons -->
-        <div class="flex items-center justify-between gap-2">
-          <Text size="base" weight="semibold" class="truncate">{{ hub.name }}</Text>
-          <div v-if="hub.transportTypes?.length" class="flex items-center gap-1 shrink-0">
-            <Icon v-if="hasTransport('auto')" name="lucide:truck" size="14" class="text-base-content/50" />
-            <Icon v-if="hasTransport('rail')" name="lucide:train-front" size="14" class="text-base-content/50" />
-            <Icon v-if="hasTransport('sea')" name="lucide:ship" size="14" class="text-base-content/50" />
-            <Icon v-if="hasTransport('air')" name="lucide:plane" size="14" class="text-base-content/50" />
-          </div>
-        </div>
+        <!-- Title -->
+        <Text size="base" weight="semibold" class="truncate">{{ hub.name }}</Text>
         <!-- Country left, distance right -->
         <div class="flex items-center justify-between">
           <Text tone="muted" size="sm">
@@ -35,6 +27,13 @@
             {{ hub.distance }}
           </span>
         </div>
+        <!-- Transport icons bottom -->
+        <div v-if="hub.transportTypes?.length" class="flex items-center gap-1 pt-1">
+          <Icon v-if="hasTransport('auto')" name="lucide:truck" size="14" class="text-base-content/50" />
+          <Icon v-if="hasTransport('rail')" name="lucide:train-front" size="14" class="text-base-content/50" />
+          <Icon v-if="hasTransport('sea')" name="lucide:ship" size="14" class="text-base-content/50" />
+          <Icon v-if="hasTransport('air')" name="lucide:plane" size="14" class="text-base-content/50" />
+        </div>
       </div>
     </Card>
   </component>