Changing Vuetify's Button Width And Padding

Question

Buttons are large and going over the card width

This should be easy, but I'm having a bit of tough time customizing the buttons inside the cards. I want to remove all the padding, so that the black border nicely encompasses the icon without any extra space in the left/right-hand sides. I've tried adding custom css and !important and directly overriding the div.btn__content, but those don't work. Any ideas to do this as simply as possible?

Reproduction Link

Answer 1

The issue is the min-width of the .btn class. Setting that to 0 will allow the button to be smaller than 88px. You should also just set the padding of the .btn__content to 0.

div.btn__content {
  padding: 0;
}

div.card__actions .btn {
  min-width: 0;
}

Here's an updated codepen.