Livewire How to set the width of jetstream dialog-modal? - modal-dialog

Question

I am using the dialog-modal of Jet-Stream, it works pretty fine but I don't understand how to fix its width.
Here below is the way I use it.
<x-dialog-modal wire:model="show_equipment_dialog" :maxWidth="'100%'">
<x-slot name="title"> {{ __('Equipment Dialog') }}</x-slot>
<x-slot name="content">
#livewire('equipment-lw', ['usage' => 'chooser'])
</x-slot>
<x-slot name="footer">
<x-secondary-button wire:click="closeEquipmentDialog">{{ __('Close the dialog') }}</x-secondary-button>
</x-slot>
</x-dialog-modal>
with this in dialog-modal
#props(['id' => null, 'maxWidth' => null,'usage'=>'database'])
<x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
<div class=" px-6 py-4">
<div class="text-lg">
{{ $title }}{{$maxWidth}}
</div>
<div class="mt-4">
{{ $content }}
</div>
</div>
<div class="px-6 py-4 bg-gray-100 text-right">
{{ $footer }}
</div>
The maxWidth is passed to dialog-modal (I can see this thanks to the {{$maxWidth}} in the content slot) but has no effect on the x-jet-modal. What is the correct syntax?
Thank you for helping me.

Answer 1

In your modal just add maxWidth="size-you-want".
The available sizes are in resources\views\vendor\jetstream\components\modal.blade.php but you can add more. Those that are by default are sm, md, lg, xl, 2xl
<x-dialog-modal wire:model="show_equipment_dialog" maxWidth="md">
<x-slot name="title"> {{ __('Equipment Dialog') }}</x-slot>
<x-slot name="content">
#livewire('equipment-lw', ['usage' => 'chooser'])
</x-slot>
<x-slot name="footer">
<x-secondary-button wire:click="closeEquipmentDialog">{{ __('Close the dialog') }}</x-secondary-button>
</x-slot>

Answer 2

You can set the maxWidth of the modal in the vendor/jetstream/components "modal.blade.php" then find the switch statement of maxWidth

Answer 3

You can add the following in your modal component
$maxWidth = [
'sm' => 'sm:max-w-sm', 'md' => 'sm:max-w-md', 'lg' => 'sm:max-w-lg', 'xl' => 'sm:max-w-xl', '2xl' => 'sm:max-w-2xl', '3xl' => 'sm:max-w-3xl', '4xl' => 'sm:max-w-4xl', '5xl' => 'sm:max-w-5xl', '6xl' => 'sm:max-w-6xl', '7xl' => 'sm:max-w-7xl', 'full' => 'sm:max-w-full',
][$maxWidth ?? '2xl'];