Avoid overlapping bottom navigator with metadata box on mobile screen

Author: Hironsan

frontend/components/containers/annotation/BottomNavigator.vue

@@ -1,9 +1,8 @@
 <template>
   <v-bottom-navigation
+    app
     absolute
     hide-on-scroll
-    background-color="transparent"
-    class="elevation-0"
   >
     <v-btn @click="prevPage">
       <span>Prev</span>

frontend/layouts/annotation.vue

@@ -19,18 +19,21 @@
     </v-navigation-drawer>
 
     <nuxt />
+    <bottom-navigator class="d-flex d-sm-none" />
   </v-app>
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import TheSideBar from '~/components/organisms/layout/TheSideBar'
 import TheHeader from '~/components/organisms/layout/TheHeader'
+import BottomNavigator from '@/components/containers/annotation/BottomNavigator'
 
 export default {
   components: {
     TheSideBar,
-    TheHeader
+    TheHeader,
+    BottomNavigator
   },
   data() {
     return {

frontend/pages/projects/_id/sequence-labeling/index.vue

@@ -15,7 +15,6 @@
           <paginator />
         </v-col>
       </v-row>
-      <bottom-navigator class="d-flex d-sm-none" />
       <v-row justify="center">
         <v-col cols="12" md="9">
           <v-card>
@@ -43,7 +42,6 @@ import ApproveButton from '@/components/containers/annotation/ApproveButton'
 import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
 import FilterButton from '@/components/containers/annotation/FilterButton'
 import MetadataBox from '@/components/organisms/annotation/MetadataBox'
-import BottomNavigator from '@/components/containers/annotation/BottomNavigator'
 
 export default {
   layout: 'annotation',
@@ -52,7 +50,6 @@ export default {
 
   components: {
     ApproveButton,
-    BottomNavigator,
     EntityItemBox,
     FilterButton,
     Paginator,

frontend/pages/projects/_id/sequence-to-sequence/index.vue

@@ -13,7 +13,6 @@
           <paginator />
         </v-col>
       </v-row>
-      <bottom-navigator class="d-flex d-sm-none" />
       <v-row justify="center">
         <v-col cols="12" md="9">
           <seq2seq-container />
@@ -35,7 +34,6 @@ import Seq2seqContainer from '~/components/containers/annotation/Seq2seqContaine
 import Paginator from '~/components/containers/annotation/Paginator'
 import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
 import MetadataBox from '@/components/organisms/annotation/MetadataBox'
-import BottomNavigator from '@/components/containers/annotation/BottomNavigator'
 
 export default {
   layout: 'annotation',
@@ -46,8 +44,7 @@ export default {
     Seq2seqContainer,
     Paginator,
     GuidelineButton,
-    MetadataBox,
-    BottomNavigator
+    MetadataBox
   },
 
   computed: {

frontend/pages/projects/_id/text-classification/index.vue

@@ -13,7 +13,6 @@
           <paginator />
         </v-col>
       </v-row>
-      <bottom-navigator class="d-flex d-sm-none" />
       <v-row justify="center">
         <v-col cols="12" md="9">
           <text-classification />
@@ -35,15 +34,13 @@ import TextClassification from '~/components/containers/annotation/TextClassific
 import Paginator from '~/components/containers/annotation/Paginator'
 import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
 import MetadataBox from '@/components/organisms/annotation/MetadataBox'
-import BottomNavigator from '@/components/containers/annotation/BottomNavigator'
 
 export default {
   layout: 'annotation',
 
   middleware: ['check-auth', 'auth'],
 
   components: {
-    BottomNavigator,
     TextClassification,
     Paginator,
     GuidelineButton,