Make navbar better on small devices

web/frontend/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div id="apiary-navbar">
-      <b-navbar type="dark" variant="dark">
+      <b-navbar toggleable="md" type="dark" variant="dark">
         <b-navbar-brand href="#">
           <img
             alt="logo"
@@ -12,14 +12,19 @@
           />
           apiary.t-juice.club
         </b-navbar-brand>
-        <b-navbar-nav>
+        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+        <b-collapse id="nav-collapse" is-nav>
+          <b-navbar-nav class="mr-auto">
             <b-nav-item :to="'/'">Home</b-nav-item>
             <b-nav-item :to="'/stats'">Stats</b-nav-item>
             <b-nav-item :to="'/attempts'">Attempts</b-nav-item>
           </b-navbar-nav>
+        </b-collapse>
       </b-navbar>
     </div>
+    <b-container id="main-content-container" fluid="md">
       <router-view></router-view>
+    </b-container>
   </div>
 </template>
 
@@ -47,7 +52,6 @@ $font-stack: 'Secular One';
   color: #2c3e50;
   margin-top: 0;
 }
-
 .navbar-brand {
   font-family: 'Secular One', sans-serif;
 }

web/frontend/src/components/AttemptList.vue

@@ -2,7 +2,13 @@
   <div class="attemptlist">
     <h1>Attempt list</h1>
     <p>
-      <b-table striped hover :items="attempts" :fields="fields"></b-table>
+      <b-table
+        responsive="md"
+        striped
+        hover
+        :items="attempts"
+        :fields="fields"
+      ></b-table>
     </p>
   </div>
 </template>