Improve responsiveness of navbar

src/components/BotList.vue

@@ -11,13 +11,14 @@
         @click="selectBot(bot.botId)"
       >
         {{ bot.botName || bot.botId }}
+        {{ allIsBotOnline[bot.botId] ? 'Online' : 'Offline' }}
+
         <b-button class="btn-xs ml-1" size="sm" title="Delete trade" @click="clickRemoveBot(bot)">
           <EditIcon :size="16" title="Delete trade" />
         </b-button>
         <b-button class="btn-xs ml-1" size="sm" title="Delete bot" @click="clickRemoveBot(bot)">
           <DeleteIcon :size="16" title="Delete trade" />
         </b-button>
-        {{ allIsBotOnline[bot.botId] ? 'Online' : 'Offline' }}
       </b-list-group-item>
     </b-list-group>
     <LoginModal class="mt-2" login-text="Add new bot" />

src/components/layout/NavBar.vue

@@ -37,7 +37,8 @@
             </b-nav-text>
           </li>
           <li v-if="hasBots" class="nav-item">
-            <b-nav-item-dropdown right>
+            <!-- Hide dropdown on xs, instead show below  -->
+            <b-nav-item-dropdown right class="d-none d-sm-block">
               <b-dropdown-item>V: {{ getUiVersion }}</b-dropdown-item>
               <template #button-content>
                 <b-avatar size="2em" button>FT</b-avatar>
@@ -49,6 +50,16 @@
                 >Sign Out</router-link
               >
             </b-nav-item-dropdown>
+            <div class="d-block d-sm-none">
+              <!-- Visible only on XS -->
+              <b-dropdown-item>V: {{ getUiVersion }}</b-dropdown-item>
+              <router-link class="dropdown-item" to="/settings">Settings</router-link>
+              <b-checkbox v-model="layoutLockedLocal" class="pl-5">Lock layout</b-checkbox>
+              <b-dropdown-item @click="resetDynamicLayout">Reset Layout</b-dropdown-item>
+              <router-link class="dropdown-item" to="/" @click.native="clickLogout()"
+                >Sign Out</router-link
+              >
+            </div>
           </li>
           <li v-else>
             <!-- should open Modal window! -->

src/views/Home.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="home">
-    <bot-list />
+    <div class="container">
+      <bot-list />
+    </div>
     <hr />
     <!-- <img alt="Freqtrade logo" src="../assets/freqtrade-logo.png" width="450px" class="my-5" /> -->
     <div alt="Freqtrade logo" class="logo-svg my-5 mx-auto" />