When a DataTable is displayed on a smartphone screen in portrait orientation, the original rows are separated and the appearance is not ideal. The same is ideal when the smartphone is displayed in landscape mode.

I need help with one of the following two solutions ・Maintain the default look and feel in portrait mode. ・Fix the landscape screen.

The environment is using vue.js, no single page components or vuerouter.

            <v-main id="main" class="blue-grey lighten-4">
                <v-container fluid fill-height>
                    <v-card>
                        <v-card-title>
                            DELE - A1
                            <v-spacer></v-spacer>
                            <v-text-field v-model="search" append-icon="mdi-magnify" label="Búsqueda" single-line
                                hide-details multi-sort show-select dense></v-text-field>
                        </v-card-title>
                        <v-data-table :headers="headers" :items="desserts" :search="search"></v-data-table>
                    </v-card>
                </v-container>
            </v-main>

        let vue = new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data: {
                search: '',
                headers: [
                    { text: 'Español', value: 'spanish', },
                    { text: 'Japonés', value: 'japanese' },
                ],
                desserts: [
                    {
                        spanish: "Español",
                        japanese: "スペイン語",
                    },
                    {
                        spanish: "Japonés",
                        japanese: "日本語",
                    },
                ],
            },
        })

enter image description here