refactor: change the dialogs attach target element to body

src/fragments/dialogs/confirm/Confirm.vue

@@ -1,6 +1,6 @@
 <template>
   <v-layout row justify-center>
-    <v-dialog v-model="show" persistent :max-width="confirmMaxWidth" :style="{zIndex: zIndex}">
+    <v-dialog v-model="show" persistent attach="body" :max-width="confirmMaxWidth" :style="{zIndex: zIndex}">
       <box :resizable="resizable" v-model="show" background="white" closable @closed="onNo">
         <div slot="header">
           <h3>{{confirmTitle}}</h3>

src/fragments/dialogs/info/Info.vue

@@ -1,6 +1,6 @@
 <template>
   <v-layout row justify-center>
-    <v-dialog v-model="show" :max-width="infoMaxWidth" :style="{zIndex: zIndex}" :persistent="persistent">
+    <v-dialog v-model="show" attach="body" :max-width="infoMaxWidth" :style="{zIndex: zIndex}" :persistent="persistent">
       <box closable @closed="onOk" v-model="show" :fillHeight="true" :resizable="resizable" background="white">
         <div slot="header">
           <h3>{{infoTitle}}</h3>

src/fragments/forms/fields-container/components/dialog-fields/DialogFields.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="active" max-width="600" class="props-modal" :persistent="true">
+  <v-dialog v-model="active" attach="body" max-width="600" class="props-modal" :persistent="true">
       <box v-model="active" :resizable="true" background="white">
         <div slot="header">
           <h3>{{title}}</h3>

src/fragments/forms/fields-container/components/form-fields/FormFields.vue

@@ -87,7 +87,7 @@
     <dialog-fields v-if="subPropsModalActive" :is-modal=true :title="subPropsModalTitle" :sub-props-index="subPropsModalIndex"
       :parameters="formParameters" @fieldUpdated="fieldUpdated" @modalConfirmed="onModalFieldAssistedConfirm">
     </dialog-fields>
-    <v-dialog v-if="manualEditModalActive" v-model="manualEditModalActive" max-width="600" class="open-field-modal">
+    <v-dialog v-if="manualEditModalActive" v-model="manualEditModalActive" max-width="600" attach="body" class="open-field-modal">
       <box v-if="manualEditModalActive" closable @closed="onEditModalOk" v-model="manualEditModalActive" :resizable="true"
         background="white">
         <div slot="header">

src/fragments/forms/map-form/components/download/Download.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-btn style="float:right; margin-top:0" small icon :title="$t('download.download')" @click="openDownload()"><v-icon>cloud_download</v-icon></v-btn>
-    <v-dialog v-model="isDownloadModalOpen" max-width="600" :persistent="true">
+    <v-dialog v-model="isDownloadModalOpen" max-width="600" attach="body" :persistent="true">
       <box v-model="isDownloadModalOpen" background="white" closable @closed="closeDownload()">
         <h3 slot="header">{{$t('download.downloadRoute')}}</h3>
         <v-text-field :label="$t('download.downloadFileName')" v-model="downloadFileName" :required="true"></v-text-field>

src/fragments/forms/map-form/components/share/Share.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-btn style="float:right; margin-top:0" small icon :title="$t('share.share')" @click="openShare()"><v-icon>share</v-icon></v-btn>
-    <v-dialog v-model="isShareModalOpen" max-width="600" :persistent="true">
+    <v-dialog v-model="isShareModalOpen" max-width="600" :persistent="true" attach="body">
       <box v-model="isShareModalOpen" background="white" closable @closed="closeShare()">
         <h3 slot="header">{{$t('share.shareLink')}}</h3>
         <v-layout row wrap>

src/fragments/forms/profile-selector/components/profile-selector-option/ProfileSelectorOption.vue

@@ -6,7 +6,7 @@
       @click="profileSelected(profile.slug)">
       <v-icon large>{{profile.icon}}</v-icon>
     </v-btn>
-    <v-menu v-if="profile.vehicleTypes" class="profile-option-menu" v-model="subProfileIsOpen"
+    <v-menu attach="body" v-if="profile.vehicleTypes" class="profile-option-menu" v-model="subProfileIsOpen"
       transition="slide-y-transition" close-on-click close-on-content-click :open-on-hover="!isMobile" bottom>
       <v-btn icon class="profile-menu-activator" slot="activator">
         <v-icon>keyboard_arrow_down</v-icon>
@@ -22,7 +22,7 @@
         </template>
       </v-list>
     </v-menu>
-    <v-menu v-else-if="profile.nestedProfiles" class="profile-option-menu" v-model="subProfileIsOpen"
+    <v-menu v-else-if="profile.nestedProfiles" class="profile-option-menu" v-model="subProfileIsOpen" attach="body"
       transition="slide-y-transition" close-on-click close-on-content-click :open-on-hover="!isMobile" bottom>
       <v-btn icon class="profile-menu-activator" slot="activator">
         <v-icon>keyboard_arrow_down</v-icon>

src/fragments/forms/route-importer/RouteImporter.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <map-form-btn @clicked="openImporter()" :icon="'cloud_upload'" :title="$t('routeImporter.loadRouteFile')" ></map-form-btn>
-    <v-dialog v-model="isImportModalOpen" max-width="600" :persistent="true">
+    <v-dialog v-model="isImportModalOpen" max-width="600" :persistent="true" attach="body">
       <box v-model="isImportModalOpen" background="white" closable @closed="closeImporter()">
         <h3 slot="header">{{$t('routeImporter.loadRouteFile')}}</h3>
         <vue-dropzone ref="importRouteDropzone" @vdropzone-file-added="fileAdded" id="dropzone" :options="dropzoneOptions"></vue-dropzone>

src/fragments/h-menu/HMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu v-if="item.items  && Array.isArray(item.items) && showMenuItem(item)" open-on-hover nudge-top="10" offset-y :key="item.href" content-class="hm-content">
+  <v-menu attach="body" v-if="item.items  && Array.isArray(item.items) && showMenuItem(item)" open-on-hover nudge-top="10" offset-y :key="item.href" content-class="hm-content">
     <v-btn class="app-btn-mh" :class="{'has-icon':item.showIcon, 'active': item.active}" :href="getHref(item)" :key="item.href" flat slot="activator" :title="item.title">
       <v-icon v-if="item.showIcon" left>{{item.icon}}</v-icon>
       {{item.title}}

src/fragments/map-view/components/my-location/MyLocation.vue

@@ -1,6 +1,6 @@
 <template>
 <div style="height:0">
-  <v-menu class="my-location-floating-menu" style="box-shadow:none" transition="slide-y-transition" v-model="menuOpen"
+  <v-menu class="my-location-floating-menu" style="box-shadow:none" transition="slide-y-transition" v-model="menuOpen" attach="body"
     :close-on-click="true"
     top offset-y
     :close-on-content-click="true" >

src/fragments/sidebar/components/top-menu/components/floating-menu/FloatingMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu v-if="menuItemsReady" class="info-menu" :open-on-hover="openOnHover" :open-on-click="!openOnHover" nudge-top="10" offset-y>
+  <v-menu v-if="menuItemsReady" class="info-menu" :open-on-hover="openOnHover" :open-on-click="!openOnHover" nudge-top="10" offset-y attach="body">
     <v-btn class="no-padding pl2 pr2" flat slot="activator" @click="menuClicked"
       v-smart-tooltip="{show: showSettingsTooltip, text: $t('floatingTopMenu.settingsTooltip'), position: 'bottom', dark: true, showOnce: true, name: 'settingsTooltip'}">
       <v-icon>{{showSettings ? 'more_vert' : 'info'}}</v-icon>

src/pages/maps/Maps.vue

@@ -52,14 +52,14 @@
       </places-carousel>
     </v-bottom-nav>
 
-    <v-dialog v-model="isSettingsOpen" max-width="600" class="settings-modal" :persistent="true">
+    <v-dialog v-model="isSettingsOpen" max-width="600" class="settings-modal" :persistent="true" attach="body">
       <box background="white" v-if="isSettingsOpen" resizable closable @closed="closeSettingsModal()">
         <h3 slot="header">{{$t('maps.settings')}}</h3>
         <settings @saved="closeSettingsModal"></settings>
       </box>
     </v-dialog>
 
-    <v-dialog v-model="isAboutOpen" max-width="600" class="about-modal" :persistent="true">
+    <v-dialog v-model="isAboutOpen" max-width="600" class="about-modal" :persistent="true" attach="body">
       <box background="white" v-if="isAboutOpen" resizable closable @closed="closeAboutModal()">
         <h3 slot="header">{{$t('maps.aboutTitle')}}</h3>
         <about></about>