How to set max width for v-btn-toggle

Question

I'm trying to get my app some style with vuetify.

But when I get to mobile format my component is to wide for my modal.

My ugly modal

<template>
  <v-container>
    <v-form @submit="addTime">
      <date-picker-component title="Date du jour"/>
      <p>Lieu de départ</p>
      <v-btn-toggle
          :value="getCurrentJournee.lieu_depart"
          mandatory
          @change="setLieuDepart"
      >
        <v-btn
            :value="lieu.domicile">
          Domicile
        </v-btn>

        <v-btn :value="lieu.entreprise">
          Entreprise
        </v-btn>
      </v-btn-toggle>
      <time-picker-component title="Heure de départ" heure="heuredepart"/>
      <time-picker-component title="Heure sur premier chantier" heure="premierchantier"/>
      <p>Temps de pause</p>
      <v-btn-toggle
          v-model="getCurrentJournee.temps_pause"
          shaped
          mandatory
          @change="setTempsPause"
      >
        <v-btn value="30">
          30'
        </v-btn>

        <v-btn value="45">
          45'
        </v-btn>

        <v-btn value="60">
          1h
        </v-btn>

        <v-btn value="75">
          1h15'
        </v-btn>
        <v-btn value="90">
          1h30'
        </v-btn>
      </v-btn-toggle>
      <time-picker-component title="Départ du dernier chantier" heure="dernierchantier"/>
      <time-picker-component title="Heure d'arrivée" heure="heurearrivee"/>


      <p>Lieu de retour</p>
      <v-btn-toggle
          :value="getCurrentJournee.lieu_arrivee"
          mandatory
          @change="setLieuRetour"
      >
        <v-btn :value="lieu.domicile">
          Domicile
        </v-btn>

        <v-btn :value="lieu.entreprise">
          Entreprise
        </v-btn>
      </v-btn-toggle><br><br>

      <v-btn type="submit" color="green" dark @click="$emit('close')"> Enregistrer </v-btn>
      <v-btn color="black" dark @click="$emit('close')"> Fermer </v-btn>
    </v-form>
  </v-container>
</template>

So here is the time form, and below the modal it sits into

<v-dialog
            v-model="modalVisible"
            persistent
            max-width="500px"
            class="ma-0 pa-0"
        >
          <v-card>
            <v-card-title>
              Enregistrement heures
            </v-card-title>
            <v-divider></v-divider>
            <v-card-text>
              <v-container>
                <!-- <v-flex xs6 lg10>                 -->
                <time-form @close="modalVisible = false"></time-form>
                <!-- </v-flex> -->
              </v-container>
              <!-- <small>* précise les champs obligatoires</small> -->
            </v-card-text>
          </v-card>
        </v-dialog>

Any clues how I could narrow it a bit to fit in ? Something like a max width or so. Please save me I have to present this by friday haha.

EDIT: I added the code for more comprehensibility, I'm trying to have the v-btn toggle in the first bit of code fit in when I'm going mobile and I'm trying not to use a v-select although I'm considering it more and more.

Answer 1

If you want to wrap the buttons, you can add class="flex-wrap" to v-btn-toggle