Undesirable effect when working with the 'vuetify-base' template

[ahmadpgh]

I tried to modify the vuetify-base template (more specifically the app.html file) to make it appropriate for my use case. However, I am struggling with having a v-dialog to be presented correctly on the screen without any scrollbar and an off margin. I don't get this problem if I design the dialogue within my jupyter notebook and render that with voila, but once I import it as a widget in the app.html I see the scrollbar and the off margin. I am not sure which adjacent file to the app.html I must change to avoid this problem. If that helps, the same v-dialog works well with a separate vuetify project I have. I appreciate your help in advance.

Here is what I get with the sample code of the modified app.html code beneath:

Here is a sample:

{% raw -%}
<div id="app" style="display: none">

    <v-app>

        <v-slide-y-transition>
            <v-layout v-show="loading" align-center justify-center>
                <v-card style="min-width: 400px">
                    <v-progress-linear :indeterminate="loadingPercentage < 0" v-model="loadingPercentage" height="15"></v-progress-linear>

                    <v-card-title primary-title class="py-8">
                        <h1>{{ loading_text }}</h1>
                    </v-card-title>
                </v-card>
            </v-layout>
        </v-slide-y-transition>

        <v-slide-y-transition>
            <v-layout v-show="!loading">

                <v-app-bar clipped-left color="teal" class="text-uppercase" app>

                    <v-dialog v-model="dialog" width="600">
                      <template v-slot:activator="{ on: dialog }">
                            <v-btn v-on="{...dialog}" color="white" small text>
                                Email us 
                                <v-icon right> mdi-email-outline </v-icon>
                            </v-btn>
                      </template>

                      <v-card flat>
                        <v-card-title> Send us an email </v-card-title>

                        <v-form ref="form" @submit.prevent="submit">
                          <v-container fluid>
                            <v-row>

                              <v-col cols="12" sm="6">
                                <v-text-field color="purple darken-2" label="Full name" required></v-text-field>
                              </v-col>

                              <v-col cols="12">
                                <v-textarea color="teal"><template v-slot:label> <div> Content </div></template></v-textarea>
                              </v-col>
                              
                            </v-row>
                          </v-container>
                        </v-form>

                      </v-card>
                    </v-dialog>

                </v-app-bar>
            </v-layout>
        </v-slide-y-transition>

    </v-app>

</div>

<script>

var app = new Vue({
    el: '#app',
    vuetify: new Vuetify({
        theme: { dark: themeIsdark },
    }),
    mounted() {
        document.querySelector('#app').removeAttribute("style");
    },
    data() {
        return {
            loading_text: "Loading page",
            loadingPercentage: -1,
            loading: true,
            title: "",
            absolute: true,
            darkMode: false,
            dialog: false,
        }
    },
});

</script>

{% endraw -%}

[etienne-monier]

This is solved by this MR