Resizable Modal

• Requirements
• Features
  • Works with
  • Skipped when
• Compatibility
• Installation
• Configuration
  • Plugin methods
  • Standalone (without panel plugin)
  • Per-action opt-in
• Eligible modals
• Usage
• Troubleshooting
• License

Filament v4/v5 plugin that adds drag-to-resize handles on action modals. Width snaps through Filament's native Width breakpoints (fi-width-* classes), so resized modals behave the same as ->modalWidth(Width::*).

Inspired by asmit/resized-column resized-column.

#Requirements

• PHP 8.2+
• Filament v4 (Livewire v3) or Filament v5 (Livewire v4)
• Laravel 10+ with Filament v4, or Laravel 11+ with Filament v5

#Features

• Corner resize handles on all four modal corners
• Snaps to Filament Width enum breakpoints (3xs through screen-2xl)
• Persists per-action width in localStorage (optional)
• Works on table, header, bulk, and view actions with forms
• Global registration or per-action opt-in
• Panel plugin or standalone configuration

#Works with

• Record actions (row actions)
• Bulk actions
• Header actions (list & view pages)
• CreateAction
• EditAction (with ->modal())
• Custom Action::make() with schema

#Skipped when

• Confirmation-only (no form)
• Slide-over modals
• Width::Screen
• Plugin disabled

#Compatibility

The same APIs are used on both versions: Action::configureUsing(), extraModalWindowAttributes(), hasFormWrapper(), Filament\Support\Enums\Width, and PanelsRenderHook::SCRIPTS_AFTER. No version-specific configuration is required.

#Installation

composer require anish/resizable-modal

Register the plugin in your panel provider:

use Anish\ResizableModal\ResizableModalPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            ResizableModalPlugin::make(),
        ]);
}

Publish config (optional):

php artisan vendor:publish --tag=resizable-modal-config

#Configuration

// config/resizable-modal.php
return [
    'enabled' => true,
    'register_on_actions' => true,
    'persist_in_local_storage' => true,
    'local_storage_prefix' => 'filament.resizable-modal',
];

#Plugin methods

ResizableModalPlugin::make()
    ->enabled(fn (): bool => true)
    ->registerOnActions(true)
    ->persistInLocalStorage(true)
    ->localStoragePrefix('my-app.resizable-modal')
    ->resizableWidths(['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl']);

#Standalone (without panel plugin)

// app/Providers/AppServiceProvider.php
use Anish\ResizableModal\ResizableModalPlugin;

public function boot(): void
{
    ResizableModalPlugin::standalone()
        ->persistInLocalStorage(true);
}

#Per-action opt-in

Disable global registration and attach manually:

// config/resizable-modal.php
'register_on_actions' => false,

// On a specific action:
use Anish\ResizableModal\Support\ResizableModal;

Action::make('edit')
    ->extraModalWindowAttributes(ResizableModal::extraAttributes(), merge: true);

#Eligible modals

Resize is applied when all of the following are true:

• Action has a form wrapper (schema)
• Not a confirmation-only modal
• Not a slide-over
• Modal width is not Width::Screen

#Usage

1. Open any eligible action modal.
2. Drag any corner handle diagonally to change width.
3. Double-click a corner handle to reset to the action's default width.

#Troubleshooting

If handles appear but resize does nothing:

1. Hard refresh the browser (Ctrl+Shift+R).
2. Clear stale localStorage keys from older versions:

Object.keys(localStorage)
  .filter((key) => key.includes("resizable-modal"))
  .forEach((key) => localStorage.removeItem(key));

#License

MIT. See LICENSE.txt.