Improving the modal (auto positioning, sizes, (quick) actions)

[mauritskorse]

It would be great if the modals could get some more functionality just like the new components get quite some extra features out of the box. I have already created my custom modal for this, but native support would be awesome :)

(Quick) actions

Just like the new callout component it would be great if modals will have a slot for actions as well as quick actions. I.e. a slot for normal buttons at the bottom and a slot for adding quick actions positioned next to the close button. Common buttons I add there are a grow/shrink toggle and bookmark/save.

Auto positioning

For a custom tooltip component I already implemented auto positioning depending on wether you're on a mobile device or on a desktop (#1069). For that to work I hacked a bit into the core javascript. But for modals this could be quite a bit easier, especially now tailwind v4 supports max-md selector out of the box. It does however conflict a bit with the current way variants and position are defined. Hence, in my custom implemenation I scrapped the flyout variant and only have positioning: center, bottom, left and auto. Bottom and left are flyouts automatically..
In auto mode the modal shows centered on desktop, and on mobile it is either positioned at the bottom or left at the screen depending on portrait or landscape mode of the device.

Screen.Recording.2025-03-26.215245.mp4

Sizes

On many modals I start by adding some size properties. Especially if its content is a new livewire form component for which you would like to keep the width and height consistent while editing/adjusting things in that form. Otherwise you can get jumpy modals as they shrink or grow to be able to fit the content. Setting sizes helps to keep the modal at ease ;)

Below is my custom blade for positioning and sizes:

@props([
    'dismissible' => null,
    'position' => null,
    'closable' => null,
    'trigger' => null,
    'variant' => null,
    'name' => null,

    // added
    'expandable' => null,
    'quick' => null,
    'actions' => null,
    'size' => null,
])

@php
$closable ??= $variant === 'bare' ? false : true;
$position ??= 'center';

$classes = Flux::classes()
    ->add('w-full')
    ->add(match( $size ) {
        'sm' => 'max-w-sm',
        'md' => 'max-w-md,
        'lg' => 'max-w-lg',
        'xl' => 'max-w-xl',
        'full' => 'inset-6',
        default => 'max-w-md',
    })

    ->add(match ($position) {
        'center' => 'p-6 [:where(&)]:max-w-xl rounded-xl',
        'bottom' => 'fixed m-0 p-8 min-w-[100vw] overflow-y-auto mt-auto [--fx-flyout-translate:translateY(50px)] border-t',
        'left' => 'fixed m-0 p-8 max-h-dvh min-h-dvh md:[:where(&)]:min-w-[25rem] overflow-y-auto mr-auto [--fx-flyout-translate:translateX(-50px)] border-r',
        'right' => 'fixed m-0 p-8 max-h-dvh min-h-dvh md:[:where(&)]:min-w-[25rem] overflow-y-auto ml-auto [--fx-flyout-translate:translateX(50px)] border-l',
        'auto' => 'md:p-6 md:[:where(&)]:max-w-xl md:rounded-xl md:border ' .
                  'max-md:fixed max-md:m-0 max-md:p-8 max-md:overflow-y-auto ' . 
                  'max-md:portrait:min-w-[100vw] max-md:portrait:mt-auto max-md:portrait:[--fx-flyout-translate:translateY(50px)] max-md:portrait:border-t ' .
                  'max-md:landscape:min-h-dvh max-md:landscape:min-h-dvh max-md:landscape:mr-auto max-md:landscape:[--fx-flyout-translate:translateX(-50px)] max-md:landscape:border-r', //md:[:where(&)]:min-w-[25rem]

    })

    ->add(match ($variant) {
        default => 'shadow-lg',
        'bare' => '',
    })

    // colors
    ->add(match ($variant) {
        default => 'bg-white dark:bg-zinc-800 border-transparent dark:border-zinc-700',
        'bare' => 'bg-transparent',
    });

// rest of the file