How to make Vuetify snackbar fit around text?

Question

I am making use of Vuetify's snackbar component and it seems there is a fixed minimum width cos no matter how short the text is, it doesn't reduce the snackbar, the size only changes when the text gets really long. Is it possible to "force" the snackbar match the size of my text?

My code:

<template>
  <v-snackbar v-model="show" :color="color" :timeout="timeout"  right top >
    {{ message }} 

    <v-icon v-if="color === 'success'" >fas fa-thumbs-up</v-icon> 
    <v-icon v-else >fas fa-thumbs-down</v-icon>
  </v-snackbar>
</template>

<script>
export default {
  data () {
    return {
      timeout: '3000',
      show: false,
      message: '',
      color: ''
    }
  },

  created () {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'snackbar/showMessage') {
        this.message = state.snackbar.content
        this.color = state.snackbar.color
        this.show = true
      }
    })
  }
}
</script>

I found something similar on StackOverflow here, but it only works for the height.

Answer 1

I was able to fix it using this comment, so now my code looks like this:

<template>
  <v-snackbar v-model="show" :color="color" :timeout="timeout" right top >
    {{ message }} 
    <v-icon v-if="color === 'success'" >fas fa-thumbs-up</v-icon> 
    <v-icon v-else >fas fa-thumbs-down</v-icon>
  </v-snackbar>
</template>

<script>
export default {
  data () {
    return {
      timeout: '3000',
      show: false,
      message: '',
      color: ''
    }
  },

  created () {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'snackbar/showMessage') {
        this.message = state.snackbar.content
        this.color = state.snackbar.color
        this.show = true
      }
    })
  }
}
</script>

<style scoped>    
    ::v-deep .v-snack__wrapper {
        min-width: 0px;
    }
</style>

Answer 2

Latest update based on Vuetify documentation, just set min-width="0" and it's ok

Answer 3

for showing the snackbar in just one line, you can simply use this max-width="100%"