title: horizontal scroll apear in the page when I active delete button that is a dialog
body: <p><br />
  I have a tabel that has approved column with 3 condition that one of that condition is when the item is not approved the delete button is showing and delete button has confirmation which I made that by dialog component of vuetify.</p>
  
  <blockquote>
    <p>the problem is when the delete button is showing, horizontal scroll
    apear in bottom of the tabel. how can fix that</p>
  </blockquote>
  
  <pre><code>&lt;v-data-table
                      :items="allLists"
                      :headers="headers"
                      :search="search"
                      class="mx-3"
              &gt;
                  &lt;template v-slot:item.approved="{ item }"&gt;
                      &lt;v-container fluid&gt;
                          &lt;v-checkbox v-model="item.checked" id="checkbox"&gt;&lt;/v-checkbox&gt;
                      &lt;/v-container&gt;
                  &lt;/template&gt;
  
                  &lt;template v-slot:item.action="{ item }"&gt;
                      &lt;v-row&gt;
                          &lt;v-btn
                                  text
                                  dark
                                  rounded
                                  color="success"
                                  v-if="item.checked === true"
                          &gt;
                              &lt;v-img
                                      :src="require('../assets/success.svg')"
                                      v-if="item.checked === true"
                                      max-width="30px"
                              &gt;&lt;/v-img&gt;
                          &lt;/v-btn&gt;[enter image description here][1]
                          &lt;template
                                  v-if="item.checked === false"
                          &gt;
                              &lt;v-row&gt;
                                  &lt;v-dialog v-model="dialog" max-width="290"&gt;
                                      &lt;template v-slot:activator="{ on }"&gt;
                                          &lt;v-row class="mx-3"&gt;
                                              &lt;v-btn
                                                      color="error"
                                                      text
                                                      dark
                                                      rounded
                                                      v-on="on"
                                              &gt;
                                                  &lt;v-img
                                                          :src="require('../assets/deletenew.svg')"
                                                          max-width="29px"
                                                  &gt;&lt;/v-img&gt;
                                              &lt;/v-btn&gt;
                                          &lt;/v-row&gt;
                                      &lt;/template&gt;
                                      &lt;v-card&gt;
                                          &lt;v-card-title class="red headline white--text"&gt;Confirm Delete&lt;/v-card-title&gt;
                                          &lt;br&gt;
                                          &lt;v-card-title style="font-weight: bold; font-size: 16px" class="justify-center"&gt;
                                              Are You Sure?
                                          &lt;/v-card-title&gt;
                                          &lt;v-card-actions&gt;
                                              &lt;v-btn color="primary"
                                                     class="font-weight-bold"
                                                     text
                                                     @click="dialog = !dialog"
                                              &gt;
                                                  No
                                              &lt;/v-btn&gt;
                                              &lt;v-spacer&gt;&lt;/v-spacer&gt;
                                              &lt;v-btn
                                                      color="primary"
                                                      class="font-weight-bold"
                                                      text
                                                      @click="dialog = !dialog"
                                                      v-on:click="del(item.pk)"
                                              &gt;
                                                  Yes
                                              &lt;/v-btn&gt;
                                          &lt;/v-card-actions&gt;
                                      &lt;/v-card&gt;
                                  &lt;/v-dialog&gt;
                              &lt;/v-row&gt;
                          &lt;/template&gt;
  
                          &lt;v-btn
                                  text
                                  dark
                                  rounded
                                  color="warning"
                                  v-if="item.checked == null"
                          &gt;
                              &lt;v-img
                                      :src="require('../assets/warning.svg')"
                                      max-width="29px"
                              &gt;&lt;/v-img&gt;
                          &lt;/v-btn&gt;
                      &lt;/v-row&gt;
                  &lt;/template&gt;
              &lt;/v-data-table&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/FyorF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FyorF.png" alt="my tabel when scroll apear at bottom of that"></a></p>