From 8b7f903378a867d193fb4a20a8a1fefe8d2db60e Mon Sep 17 00:00:00 2001
From: Katrin Yordanova <katrin.yordanova@crust.tech>
Date: Thu, 29 Dec 2022 17:59:54 +0200
Subject: [PATCH] Adjust node styles in FederationSettings when zooming in/out

---
 .../Admin/Module/FederationSettings.vue       | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/client/web/compose/src/components/Admin/Module/FederationSettings.vue b/client/web/compose/src/components/Admin/Module/FederationSettings.vue
index 7089b0a3e..85494f352 100644
--- a/client/web/compose/src/components/Admin/Module/FederationSettings.vue
+++ b/client/web/compose/src/components/Admin/Module/FederationSettings.vue
@@ -50,11 +50,19 @@
             :key="f.nodeID"
             href="#"
             :class="{ 'border border-primary': f.nodeID === upstream.active }"
-            class="border text-truncate"
+            class="border d-flex flex-column"
             @click="upstream.active = f.nodeID"
           >
-            {{ f.name }}<br>
-            <small>{{ f.baseURL }}</small>
+            <p
+              class="mb-0 text-truncate"
+            >
+              {{ f.name }}
+            </p>
+            <small
+              class="text-truncate"
+            >
+              {{ f.baseURL }}
+            </small>
           </b-list-group-item>
         </b-list-group>
 
@@ -142,11 +150,19 @@
             :key="f.nodeID"
             href="#"
             :class="{ 'border border-primary': f.nodeID === downstream.active }"
-            class="border text-truncate"
+            class="border d-flex flex-column"
             @click="downstream.active = f.nodeID"
           >
-            {{ f.name }}<br>
-            <small>{{ f.baseURL }}</small>
+            <p
+              class="mb-0 text-truncate"
+            >
+              {{ f.name }}
+            </p>
+            <small
+              class="text-truncate"
+            >
+              {{ f.baseURL }}
+            </small>
           </b-list-group-item>
         </b-list-group>