I am currently working with a modal window code snippet.
<transition name="modal" @close="showModal = false">
<div class="modal-mask" style=" width: 90% !important;">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
Enter your message here
</slot>
</div>
<div class="modal-body">
<slot name="body">
<textarea rows="10" cols="45" v-model="MessageText" name="MessageText"</textarea>
</slot>
</div>
</div>
</div>
</div>
</transition>
When viewed on small screens like phones, the content extends beyond the screen. How can I make it responsive to fit the screen?
Update