I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet.
<div id="app">
<v-modal>
<v-container class="modal-container">
<v-card>
<v-treeview :items="items">
<template slot="prepend" slot-scope="{ item, open, leaf }">
</template>
<template slot="append" slot-scope="{ item, open, leaf }"><v-btn small>Do Action</v-btn></template>
</v-treeview>
</v-card>
</v-container>
</v-modal>
</div>
new Vue({
el: '#app',
data() {
return {
item: null,
items: [
{
id: 0,
children: [{
id:1,
name: "Child Text",
}],
name: "Long Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
},
{
name: "Short text"
},
]
}
}
})