Search the Community

Всем привет, В Laravel 5.5/vue.js2.5 приложении делаю таблицу с использованием vuetify 1.0.8 с версткой : <template> <v-flex xs12 sm6> <v-card light flat> <v-card-title> Search genre <v-spacer></v-spacer> <v-text-field append-icon="search" label="Search" single-line hide-details v-model="search" ></v-text-field> </v-card-title> <v-btn color="primary" dark @click="editItem ('new')" class="mb-1">New genre</v-btn> <v-data-table :headers="headers" :items="genresList" :search="search" :pagination.sync="pagination" class="elevation-1" prev-icon="mdi-menu-left" next-icon="mdi-menu-right" sort-icon="mdi-menu-down" > <template slot="items" slot-scope="props"> <td>{{ props.item.name }}</td> <td class="text-xs-right"><span v-html="getDictionaryLabel( props.item.published, genrePublishedSelectionList, '' )"></span></td> <td>{{ concatStr(props.item.description, 80) }}</td> <td class="text-xs-right">{{ moment(props.item.created_at).format('Do MMMM, YYYY h:mm:ss a')}}</td> <td class="justify-center layout px-0"> <v-btn icon class="mx-0" @click="editItem(props.item.id)"> <v-icon color="teal">edit</v-icon> </v-btn> <v-btn icon class="mx-0" @click="deleteItem(props.item.id)"> <v-icon color="pink">delete</v-icon> </v-btn> </td> </template> <template slot="footer"> <td colspan="100%"> The site has <strong>{{ all_genres_count }}</strong> genres ( <strong>{{ active_genres_count }}</strong> active ) </td> </template> <v-alert slot="no-results" :value="true" color="red accent-2" icon="warning"> Your search for "{{ search }}" found no results. </v-alert> <template slot="no-data" color="teal"> <v-alert outline icon="warning" :value="true" color="red accent-2"> No data found. </v-alert> </template> </v-data-table> </v-card> </v-flex> </template> <script> import {bus} from '../../app'; import appMixin from '../../appMixin'; ... </script> Мне нужно чтобы на маленьких и очень маленьких устройствах таблица прокручивалась вправо и не ломала верстку всей страницы В определение v-flex я оставил для нагладноссти xs12 и sm6 и на ipad-е отображается номально https://imgur.com/a/DAGdY таблица с данными тягается влевл=вправо и шрифты нормальные Но на устройствах шириной 320px вся таблица отображается без прокрутки https://imgur.com/a/Kwaw6 Вся страница отображается очень мелким шрифтом. если убрать xs12 и sm6 в определении v-flex то на устройствах шириной 320px вид такой же а на ipad-е таблица с данными в полную ширину и без прокрутки. А как правильно ? Спасибо!