From aa6fb5c6f849af06fa320ac8f70b488e457fb0f7 Mon Sep 17 00:00:00 2001
From: Tako <me@example.com>
Date: Wed, 31 May 2023 10:32:36 +0000
Subject: [PATCH] layout improvements

---
 .../ftbot/PairlistConfigResults.vue           | 34 +++++++++----------
 src/components/ftbot/PairlistConfigurator.vue |  4 +--
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/ftbot/PairlistConfigResults.vue b/src/components/ftbot/PairlistConfigResults.vue
index 0d1dde4b..252ebb15 100644
--- a/src/components/ftbot/PairlistConfigResults.vue
+++ b/src/components/ftbot/PairlistConfigResults.vue
@@ -1,28 +1,28 @@
 <template>
   <div>
     <div v-if="whitelist.length > 0" class="d-flex flex-column flex-lg-row px-2">
-      <div class="col-12 col-md-2">
-        <b-list-group>
-          <b-list-group-item
-            v-for="(pair, i) in whitelist"
-            :key="pair.pair"
-            button
-            class="d-flex justify-content-between align-items-center py-1"
-            :active="pair.pair === botStore.activeBot.selectedPair"
-            :title="pair.pair"
-            @click="botStore.activeBot.selectedPair = pair.pair"
-          >
-            <b-form-checkbox v-model="whitelist[i].enabled"></b-form-checkbox>
-            {{ pair.pair }}
-          </b-list-group-item>
-        </b-list-group>
-      </div>
+      <!-- TODO: look into flexbox solution to have overflow scroll? -->
+      <b-list-group class="col-12 col-md-2 overflow-auto" style="height: calc(100vh - 135px)">
+        <b-list-group-item
+          v-for="(pair, i) in whitelist"
+          :key="pair.pair"
+          button
+          class="d-flex justify-content-between align-items-center py-1"
+          :active="pair.pair === botStore.activeBot.selectedPair"
+          :title="pair.pair"
+          @click="botStore.activeBot.selectedPair = pair.pair"
+        >
+          <b-form-checkbox v-model="whitelist[i].enabled"></b-form-checkbox>
+          {{ pair.pair }}
+        </b-list-group-item>
+      </b-list-group>
       <div class="flex-fill">
-        <!-- TODO: fix layout issues -->
         <ChartView />
       </div>
       <div class="col-12 col-md-2">
         <CopyableTextfield
+          style="height: calc(100vh - 135px)"
+          class="overflow-auto"
           :content="
             JSON.stringify(
               whitelist.filter((p) => p.enabled === true).map((p) => p.pair),
diff --git a/src/components/ftbot/PairlistConfigurator.vue b/src/components/ftbot/PairlistConfigurator.vue
index 7501b544..c8ebb0d8 100644
--- a/src/components/ftbot/PairlistConfigurator.vue
+++ b/src/components/ftbot/PairlistConfigurator.vue
@@ -24,7 +24,7 @@
         </b-button>
       </b-list-group-item>
     </b-list-group>
-    <div class="flex-fill">
+    <div class="d-flex flex-column flex-fill">
       <PairlistConfigActions />
       <PairlistConfigBlacklist />
       <b-alert
@@ -36,7 +36,7 @@
         First entry in the pairlist must be a Generating pairlist, like StaticPairList or
         VolumePairList.
       </b-alert>
-      <div ref="pairlistConfigsEl" class="h-100">
+      <div ref="pairlistConfigsEl" class="flex-grow-1">
         <PairlistConfigItem
           v-for="(pairlist, i) in pairlistsComp"
           :key="pairlist.id"