vuetify のデフォルトのレスポンシブ対応を適応させないようにしたい

Question

お世話になっております。

Vutify の　v-dialog で単語リストのようなものを作ったのですが、デフォルトの状態だとレスポンシブが適応されてしまい見栄えが悪いので、適応させないようにする方法をご存知の方に教えていただきたいです。

こちらが通常時

こちらがレスポンシブ対応した時なのですが、、正直通常時でも横幅に余裕があるのでそのまま使いたいです。

検索の仕方が悪いのもあると思いますが、「vuetify responsive invalidation」 などをキーワードにして調べてみてもあまり参考になりそうなサイトもなく、困っております。

###試したことコード

@media screen and (max-width: 600px) {

  tr {
    float: left  !important;
  }

  .v-data-table__mobile-row {
    float: left !important;
  }

  .v-data-table__mobile-row__header{
    display: none !important;
  }
}

これで以下のような感じになります。

セレクタを確認しながら地道にcssをいじればそれっぽい見た目にはなりそうなのですが、、かなり無理矢理なやり方になってしまうので、vuetifyのモバイル用のえレスポンシブを無効化させる方法をご存知の方がいらっしゃればご教授いただきたいです。

よろしくお願い致します。

Answer 1

いくつか考えられます。

①レスポンシブのbreakpointのしきい値を変更する

Display Breakpoints — Vuetify

全コンポーネントに適用されます。

②各コンポーネントのpropsを指定する

v-data-table

質問ではv-dialogについて質問されていますが、キャプチャを見た限りv-data-tableの場合として回答します。
mobile-breakpointを指定すれば挙動が変わるかと思われます。

Comments

[Take.Y]

moyashidaisuke 様

ご回答ありがとうございます。
ご教授いただいた①の通り、mobile-breakpointを指定することでうまくできました！
この度はお忙しい中ご回答いただきありがとうございました。