Верстка vuetify таблицы

[mstdmstd]

Всем привет,
В 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-е таблица с данными в полную ширину и без прокрутки.


А как правильно ?

Спасибо!