Make modal width a variant attribute

lib/livebook_web/components/core_components.ex

@@ -121,6 +121,7 @@ defmodule LivebookWeb.CoreComponents do
   attr :patch, :string, default: nil
   attr :navigate, :string, default: nil
   attr :class, :string, default: nil
+  attr :width, :atom, values: [:small, :medium, :big, :large], required: true
   attr :rest, :global
 
   slot :inner_block, required: true
@@ -140,7 +141,11 @@ defmodule LivebookWeb.CoreComponents do
         <!-- Modal box -->
         <.focus_wrap
           id={"#{@id}-content"}
-          class={["relative max-h-full overflow-y-auto bg-white rounded-lg shadow-xl", @class]}
+          class={[
+            "relative max-h-full overflow-y-auto bg-white rounded-lg shadow-xl",
+            "w-full",
+            modal_width_class(@width)
+          ]}
           role="dialog"
           aria-modal="true"
           tabindex="0"
@@ -167,6 +172,11 @@ defmodule LivebookWeb.CoreComponents do
     """
   end
 
+  defp modal_width_class(:small), do: "max-w-sm"
+  defp modal_width_class(:medium), do: "max-w-xl"
+  defp modal_width_class(:big), do: "max-w-4xl"
+  defp modal_width_class(:large), do: "max-w-6xl"
+
   @doc """
   Shows a modal rendered with `modal/1`.
   """
@@ -197,7 +207,7 @@ defmodule LivebookWeb.CoreComponents do
 
   def confirm_modal(assigns) do
     ~H"""
-    <.modal id={@id} class="w-full max-w-xl" phx-hook="ConfirmModal" data-js-show={show_modal(@id)}>
+    <.modal id={@id} width={:medium} phx-hook="ConfirmModal" data-js-show={show_modal(@id)}>
       <div id={"#{@id}-confirm-content"} class="p-6 flex flex-col" phx-update="ignore">
         <h3 class="text-2xl font-semibold text-gray-800" data-title></h3>
         <p class="mt-8 text-gray-700" data-description></p>

lib/livebook_web/live/app_live.ex

@@ -133,7 +133,7 @@ defmodule LivebookWeb.AppLive do
       :if={@live_action == :source and @data_view.show_source}
       id="source-modal"
       show
-      class="w-full max-w-4xl"
+      width={:big}
       patch={~p"/apps/#{@data_view.slug}"}
     >
       <.live_component module={LivebookWeb.AppLive.SourceComponent} id="source" session={@session} />

lib/livebook_web/live/home_live.ex

@@ -139,7 +139,7 @@ defmodule LivebookWeb.HomeLive do
       :if={@live_action == :close_session}
       id="close-session-modal"
       show
-      class="w-full max-w-xl"
+      width={:medium}
       patch={@self_path}
     >
       <.live_component
@@ -150,13 +150,7 @@ defmodule LivebookWeb.HomeLive do
       />
     </.modal>
 
-    <.modal
-      :if={@live_action == :import}
-      id="import-modal"
-      show
-      class="w-full max-w-4xl"
-      patch={@self_path}
-    >
+    <.modal :if={@live_action == :import} id="import-modal" show width={:big} patch={@self_path}>
       <.live_component
         module={LivebookWeb.HomeLive.ImportComponent}
         id="import"
@@ -169,7 +163,7 @@ defmodule LivebookWeb.HomeLive do
       :if={@live_action == :edit_sessions}
       id="edit-sessions-modal"
       show
-      class="w-full max-w-xl"
+      width={:medium}
       patch={@self_path}
     >
       <.live_component

lib/livebook_web/live/hub/edit/fly_component.ex

@@ -105,7 +105,7 @@ defmodule LivebookWeb.Hub.Edit.FlyComponent do
         :if={@live_action in [:add_env_var, :edit_env_var]}
         id="env-var-modal"
         show
-        class="w-full max-w-3xl"
+        width={:medium}
         target={@myself}
         patch={~p"/hub/#{@hub.id}"}
       >

lib/livebook_web/live/session_live.ex

@@ -374,7 +374,7 @@ defmodule LivebookWeb.SessionLive do
       :if={@live_action == :runtime_settings}
       id="runtime-settings-modal"
       show
-      class="w-full max-w-4xl"
+      width={:big}
       patch={@self_path}
     >
       <.live_component
@@ -389,7 +389,7 @@ defmodule LivebookWeb.SessionLive do
       :if={@live_action == :file_settings}
       id="persistence-modal"
       show
-      class="w-full max-w-4xl"
+      width={:big}
       patch={@self_path}
     >
       <.live_component
@@ -406,7 +406,7 @@ defmodule LivebookWeb.SessionLive do
       :if={@live_action == :shortcuts}
       id="shortcuts-modal"
       show
-      class="w-full max-w-6xl"
+      width={:large}
       patch={@self_path}
     >
       <.live_component
@@ -420,7 +420,7 @@ defmodule LivebookWeb.SessionLive do
       :if={@live_action == :cell_settings}
       id="cell-settings-modal"
       show
-      class="w-full max-w-xl"
+      width={:medium}
       patch={@self_path}
     >
       <.live_component
@@ -436,7 +436,7 @@ defmodule LivebookWeb.SessionLive do
       :if={@live_action == :cell_upload}
       id="cell-upload-modal"
       show
-      class="w-full max-w-xl"
+      width={:medium}
       patch={@self_path}
     >
       <.live_component
@@ -453,7 +453,7 @@ defmodule LivebookWeb.SessionLive do
       :if={@live_action == :delete_section}
       id="delete-section-modal"
       show
-      class="w-full max-w-xl"
+      width={:medium}
       patch={@self_path}
     >
       <.live_component
@@ -466,7 +466,7 @@ defmodule LivebookWeb.SessionLive do
       />
     </.modal>
 
-    <.modal :if={@live_action == :bin} id="bin-modal" show class="w-full max-w-4xl" patch={@self_path}>
+    <.modal :if={@live_action == :bin} id="bin-modal" show width={:big} patch={@self_path}>
       <.live_component
         module={LivebookWeb.SessionLive.BinComponent}
         id="bin"
@@ -476,13 +476,7 @@ defmodule LivebookWeb.SessionLive do
       />
     </.modal>
 
-    <.modal
-      :if={@live_action == :export}
-      id="export-modal"
-      show
-      class="w-full max-w-4xl"
-      patch={@self_path}
-    >
+    <.modal :if={@live_action == :export} id="export-modal" show width={:big} patch={@self_path}>
       <.live_component
         module={LivebookWeb.SessionLive.ExportComponent}
         id="export"
@@ -495,7 +489,7 @@ defmodule LivebookWeb.SessionLive do
       :if={@live_action == :package_search}
       id="package-search-modal"
       show
-      class="w-full max-w-xl"
+      width={:medium}
       patch={@self_path}
     >
       <%= live_render(@socket, LivebookWeb.SessionLive.PackageSearchLive,
@@ -508,13 +502,7 @@ defmodule LivebookWeb.SessionLive do
       ) %>
     </.modal>
 
-    <.modal
-      :if={@live_action == :secrets}
-      id="secrets-modal"
-      show
-      class="w-full max-w-4xl"
-      patch={@self_path}
-    >
+    <.modal :if={@live_action == :secrets} id="secrets-modal" show width={:big} patch={@self_path}>
       <.live_component
         module={LivebookWeb.SessionLive.SecretsComponent}
         id="secrets"

lib/livebook_web/live/settings_live.ex

@@ -182,7 +182,7 @@ defmodule LivebookWeb.SettingsLive do
       :if={@live_action == :add_file_system}
       id="add-file-system-modal"
       show
-      class="w-full max-w-3xl"
+      width={:medium}
       patch={~p"/settings"}
     >
       <.live_component
@@ -196,7 +196,7 @@ defmodule LivebookWeb.SettingsLive do
       :if={@live_action in [:add_env_var, :edit_env_var]}
       id="env-var-modal"
       show
-      class="w-full max-w-3xl"
+      width={:medium}
       patch={~p"/settings"}
     >
       <.live_component

lib/livebook_web/live/user_helpers.ex

@@ -52,7 +52,7 @@ defmodule LivebookWeb.UserHelpers do
 
   def current_user_modal(assigns) do
     ~H"""
-    <.modal id="user-modal" class="w-full max-w-sm">
+    <.modal id="user-modal" width={:small}>
       <.live_component
         module={LivebookWeb.UserComponent}
         id="user"