improve responsiveness of modal

Author: marc-aurele-besner

lib/fileonchain_web/components/core_components.ex

@@ -59,14 +59,14 @@ defmodule FileonchainWeb.CoreComponents do
         aria-modal="true"
         tabindex="0"
       >
-        <div class="flex min-h-full items-center justify-center">
+        <div class="flex min-h-full items-center justify-center p-4 sm:p-6 lg:p-8">
           <div class="w-full max-w-4xl p-4 sm:p-6 lg:py-8">
             <.focus_wrap
               id={"#{@id}-container"}
               phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
               phx-key="escape"
               phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
-              class="shadow-brand-700/10 ring-brand-700/10 relative hidden rounded-2xl bg-brand-900 p-14 shadow-lg ring-1 transition"
+              class="shadow-brand-700/10 ring-brand-700/10 relative hidden rounded-2xl bg-brand-900 p-4 sm:p-6 lg:p-8 shadow-lg ring-1 transition"
             >
               <div class="absolute top-6 right-5">
                 <button

lib/fileonchain_web/live/file_live/form_component.ex

@@ -16,7 +16,7 @@ defmodule FileonchainWeb.FileLive.FormComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="overlay mx-auto max-w-md p-12 bg-brand-900 bg-opacity-50 text-white rounded-lg shadow-lg">
+    <div class="overlay mx-auto max-w-md p-4 sm:p-6 lg:p-12 bg-brand-900 bg-opacity-50 text-white rounded-lg shadow-lg">
       <.header class="text-center text-white text-2xl">
         <%= @title %>
         <:subtitle>Use this form to manage file records in your database.</:subtitle>