Use Fluxon modal

lib/music_library_web/live/artist_live/show.html.heex

@@ -155,9 +155,10 @@
 
 <.modal
   :if={@live_action == :import}
+  class="md:min-w-2xl max-w-sm md:max-w-3xl"
   id="record-modal"
-  show
-  on_cancel={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
+  open
+  on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
 >
   <.live_component
     module={MusicLibraryWeb.AddRecordComponent}

lib/music_library_web/live/collection_live/index.html.heex

@@ -70,9 +70,10 @@
 
 <.modal
   :if={@live_action == :edit}
+  class="md:min-w-2xl"
   id="record-modal"
-  show
-  on_cancel={JS.patch(back_path(@record_list_params))}
+  open
+  on_close={JS.patch(back_path(@record_list_params))}
 >
   <.live_component
     module={MusicLibraryWeb.FormComponent}
@@ -86,9 +87,10 @@
 
 <.modal
   :if={@live_action == :import}
+  class="md:min-w-2xl max-w-sm md:max-w-3xl"
   id="record-modal"
-  show
-  on_cancel={JS.patch(back_path(@record_list_params))}
+  open
+  on_close={JS.patch(back_path(@record_list_params))}
 >
   <.live_component
     module={MusicLibraryWeb.AddRecordComponent}
@@ -104,9 +106,10 @@
 
 <.modal
   :if={@live_action == :barcode_scan}
+  class="min-w-sm md:min-w-2xl max-w-3xl"
   id="barcode-scanner-modal"
-  show
-  on_cancel={JS.patch(back_path(@record_list_params))}
+  open
+  on_close={JS.patch(back_path(@record_list_params))}
 >
   <.live_component
     module={MusicLibraryWeb.BarcodeScannerComponent}

lib/music_library_web/live/collection_live/show.html.heex

@@ -284,8 +284,8 @@
 <.modal
   :if={@live_action == :edit}
   id="record-modal"
-  show
-  on_cancel={JS.patch(~p"/collection/#{@record}")}
+  open
+  on_close={JS.patch(~p"/collection/#{@record}")}
 >
   <.live_component
     module={MusicLibraryWeb.FormComponent}

lib/music_library_web/live/wishlist_live/index.html.heex

@@ -29,9 +29,10 @@
 
 <.modal
   :if={@live_action == :edit}
+  class="md:min-w-2xl"
   id="record-modal"
-  show
-  on_cancel={JS.patch(back_path(@record_list_params))}
+  open
+  on_close={JS.patch(back_path(@record_list_params))}
 >
   <.live_component
     module={MusicLibraryWeb.FormComponent}
@@ -45,9 +46,10 @@
 
 <.modal
   :if={@live_action == :import}
+  class="md:min-w-2xl max-w-sm md:max-w-3xl"
   id="record-modal"
-  show
-  on_cancel={JS.patch(back_path(@record_list_params))}
+  open
+  on_close={JS.patch(back_path(@record_list_params))}
 >
   <.live_component
     module={MusicLibraryWeb.AddRecordComponent}

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -278,9 +278,10 @@
 
 <.modal
   :if={@live_action == :edit}
+  class="md:min-w-2xl"
   id="record-modal"
-  show
-  on_cancel={JS.patch(~p"/wishlist/#{@record}")}
+  open
+  on_close={JS.patch(~p"/wishlist/#{@record}")}
 >
   <.live_component
     module={MusicLibraryWeb.FormComponent}