feat(modal): add position prop, default to middle

[David-Crty]

What

Adds a position prop to <x-modal> mapping to daisyUI's position modifiers: top, middle, bottom, start, end. Default is middle.

<x-modal wire:model="show" />                  {{-- modal modal-middle --}}
<x-modal wire:model="show" position="top" />   {{-- modal modal-top --}}
<x-modal wire:model="show" position="" />      {{-- modal (previous behavior) --}}

Why

Mary currently renders <dialog class="modal"> with no position class. daisyUI's bare .modal-box uses max-height: 100vh with no margin — only the modal-middle/top/bottom variants get the calc(100vh - 5em) buffer.

On mobile, 100vh extends under the browser chrome, so when content overflows, the close button (absolute top-2) and modal-action row are clipped:

Before - close button hidden at top:

After

[robsontenorio]

There is no need of a extra attribute.

All classes are merged together at ->class(["modal"])

This

<x-modal ... class="modal-top" />

Becomes

<div class="modal modal-top" />

[David-Crty]

Yes, I agree; to me, it's just a way to have a "better default."

Current default modals are broken on mobile when they exceed the height of the screen.

[robsontenorio]

I think this a daisyUI stuff on recent updates.
Maybe raising an issue on its repository should help them to investigate it (with a pure daisyUI CSS example).