From 5fae07c1f4dc850b275d05349573c699c9fec061 Mon Sep 17 00:00:00 2001
From: Tako <me@example.com>
Date: Thu, 20 Jul 2023 11:41:53 +0000
Subject: [PATCH] layout improvements

---
 src/components/ftbot/TradeListNav.vue | 44 +++++++++++++++------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/ftbot/TradeListNav.vue b/src/components/ftbot/TradeListNav.vue
index e53dfe46..ee538744 100644
--- a/src/components/ftbot/TradeListNav.vue
+++ b/src/components/ftbot/TradeListNav.vue
@@ -12,32 +12,36 @@
         v-for="(trade, i) in sortedTrades"
         :key="trade.open_timestamp"
         button
-        class="d-flex flex-wrap justify-content-between align-items-center py-1"
+        class="d-flex flex-column py-1"
         :title="`${trade.pair}`"
         :active="trade.open_timestamp === selectedTrade.open_timestamp"
         @click="onTradeSelect(trade)"
       >
-        <div class="d-flex flex-column">
-          <div>
-            <span v-if="botStore.activeBot.botState.trading_mode !== 'spot'">{{
-              trade.is_short ? 'S-' : 'L-'
-            }}</span>
-            <DateTimeTZ :date="trade.open_timestamp" />
+        <div class="d-flex">
+          <div class="d-flex flex-column">
+            <div>
+              <span v-if="botStore.activeBot.botState.trading_mode !== 'spot'">{{
+                trade.is_short ? 'S-' : 'L-'
+              }}</span>
+              <DateTimeTZ :date="trade.open_timestamp" />
+            </div>
+            <TradeProfit :trade="trade" class="my-1" />
+            <ProfitPill
+              v-if="backtestMode"
+              :profit-ratio="trade.profit_ratio"
+              :stake-currency="botStore.activeBot.stakeCurrency"
+            />
+          </div>
+          <div class="d-flex flex-fill justify-content-end">
+            <b-button
+              size="sm"
+              variant="secondary-outline"
+              @click="ordersVisible[i] = !ordersVisible[i]"
+              ><i-mdi-chevron-right v-if="!ordersVisible[i]" width="24" height="24" />
+              <i-mdi-chevron-down v-if="ordersVisible[i]" width="24" height="24" />
+            </b-button>
           </div>
-          <TradeProfit :trade="trade" class="my-1" />
-          <ProfitPill
-            v-if="backtestMode"
-            :profit-ratio="trade.profit_ratio"
-            :stake-currency="botStore.activeBot.stakeCurrency"
-          />
         </div>
-        <b-button
-          size="sm"
-          variant="secondary-outline"
-          @click="ordersVisible[i] = !ordersVisible[i]"
-          ><i-mdi-chevron-right v-if="!ordersVisible[i]" width="24" height="24" />
-          <i-mdi-chevron-down v-if="ordersVisible[i]" width="24" height="24" />
-        </b-button>
         <b-collapse v-model="ordersVisible[i]">
           <ul class="px-3 m-0">
             <li