Adjust controls

[fantomas-code]

How could I adjust these controls so they don't overflow my modal?

---

I am using Tailwind CSS and Laravel 8

<x-jet-dialog-modal  wire:model="modalForm">
    <x-slot name="title">
        <span class="italic">
            {{ __(' Página a crear ▼') }}
        </span>
    </x-slot>

    <x-slot name="content">
        <div class="mt-4 italic">
            <x-jet-label for="titulo" value="{{ __('Titulo') }}" class="text-lg" />
            <x-jet-input id="titulo" class="block mt-1 w-full" type="text" wire:model.debounce.800ms='titulo' />
        </div>
        <div class="mt-4 italic">
            <x-jet-label for="url" value="{{ __('Url') }}" class="text-lg" />
            <x-jet-input id="titulo" class="block mt-1 w-full" type="text" wire:model='url' placeholder='url-del-articulo'/>
        </div>
        <div class="mt-4 italic">
            <x-jet-label for="cont" value="{{ __('Contenido') }}" class="text-lg" />
            <div class="rounded-md shadow-sm w-full ">

                    <div wire:ignore class=" ">
                        <trix-editor class="trix-content" x-ref='trix' wire:model.debounce.100000ms='contenido' wire:key='trix-content-unique-key'>
                        </trix-editor>

                    </div>
            </div >

        </div>
    </x-slot>

    <x-slot name="footer">
        <x-jet-secondary-button wire:click="$toggle('modalForm')" wire:loading.attr="disabled">
            {{ __('Cancelar') }}
        </x-jet-secondary-button>

        <x-jet-button class="ml-2 bg-purple-900" wire:click="crearPag" wire:loading.attr="disabled">
            {{ __('Guardar !!') }}
        </x-jet-button>
    </x-slot>
</x-jet-dialog-modal>