From adf2a7765c6f4041474ca5d86e5193418b11ac72 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 5 Feb 2026 19:41:51 +0700
Subject: [PATCH] Render hub groups as two-column metro tiles

---
 app/components/catalog/InfoPanel.vue | 32 ++++++++++++++--------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/components/catalog/InfoPanel.vue b/app/components/catalog/InfoPanel.vue
index 689be3a..21ab3d6 100644
--- a/app/components/catalog/InfoPanel.vue
+++ b/app/components/catalog/InfoPanel.vue
@@ -192,15 +192,15 @@
           </div>
           <div v-else-if="!loadingHubs" class="space-y-4">
             <template v-if="railHubs.length">
-              <Card padding="small" class="border border-white/10 bg-white/5">
-                <div class="flex items-center gap-2">
-                  <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
-                    <Icon name="lucide:train-front" size="16" class="text-white/80" />
+              <div class="grid grid-cols-2 gap-2">
+                <Card padding="small" class="border border-white/10 bg-white/5">
+                  <div class="flex items-center gap-2">
+                    <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
+                      <Icon name="lucide:train-front" size="16" class="text-white/80" />
+                    </div>
+                    <div class="text-sm text-white/80">{{ $t('catalog.info.railHubs') }}</div>
                   </div>
-                  <div class="text-sm text-white/80">{{ $t('catalog.info.railHubs') }}</div>
-                </div>
-              </Card>
-              <div class="flex flex-col gap-2">
+                </Card>
                 <HubCard
                   v-for="(hub, index) in railHubs"
                   :key="hub.uuid ?? index"
@@ -212,15 +212,15 @@
             </template>
 
             <template v-if="seaHubs.length">
-              <Card padding="small" class="border border-white/10 bg-white/5">
-                <div class="flex items-center gap-2">
-                  <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
-                    <Icon name="lucide:ship" size="16" class="text-white/80" />
+              <div class="grid grid-cols-2 gap-2">
+                <Card padding="small" class="border border-white/10 bg-white/5">
+                  <div class="flex items-center gap-2">
+                    <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
+                      <Icon name="lucide:ship" size="16" class="text-white/80" />
+                    </div>
+                    <div class="text-sm text-white/80">{{ $t('catalog.info.seaHubs') }}</div>
                   </div>
-                  <div class="text-sm text-white/80">{{ $t('catalog.info.seaHubs') }}</div>
-                </div>
-              </Card>
-              <div class="flex flex-col gap-2">
+                </Card>
                 <HubCard
                   v-for="(hub, index) in seaHubs"
                   :key="hub.uuid ?? index"