chore: improve responsive design

Author: enricoprazeres

lib/atomic_web/components/modal.ex

@@ -40,7 +40,7 @@ defmodule AtomicWeb.Components.Modal do
       <div class="fixed inset-0 overflow-y-auto" aria-labelledby={"#{@id}-title"} aria-describedby={"#{@id}-description"} role="dialog" aria-modal="true" tabindex="0">
         <div class="flex min-h-full items-center justify-center">
           <div class={"#{@class} w-full max-w-3xl p-4 sm:p-6 lg:py-8"}>
-            <.focus_wrap id={"#{@id}-container"} phx-click-away={JS.exec("phx-cancel", to: "##{@id}")} class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition">
+            <.focus_wrap id={"#{@id}-container"} phx-click-away={JS.exec("phx-cancel", to: "##{@id}")} class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white px-6 py-14 sm:px-8 md:px-14 shadow-lg ring-1 transition">
               <div class="absolute top-6 right-5">
                 <button phx-click={JS.exec("phx-cancel", to: "##{@id}")} type="button" class="-m-3 flex-none p-3 opacity-20 outline-none hover:opacity-40" aria-label={gettext("close")}>
                   <.icon name="hero-x-mark-solid" class="size-5" />

lib/atomic_web/components/tabs.ex

@@ -85,7 +85,7 @@ defmodule AtomicWeb.Components.Tabs do
     underline_classes =
       if active,
         do: "bg-orange-100 text-orange-600",
-        else: "text-zinc-300 bg-zinc-100"
+        else: "text-white bg-zinc-100"
 
     [base_classes, active_classes, underline_classes]
   end

lib/atomic_web/live/activity_live/form_component.ex

@@ -32,9 +32,9 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
   @impl true
   def handle_event("validate", %{"activity" => activity_params}, socket) do
     description = Map.get(activity_params, "description", "")
-    capacity = Map.get(activity_params, "max_entries", "")
+    capacity = Map.get(activity_params, "maximum_entries", "")
     has_description = is_nil(description) || String.trim(description) == ""
-    has_capacity = is_nil(capacity) || String.trim(capacity) == ""
+    capacity_field_empty = is_nil(capacity) || String.trim(capacity) == ""
 
     changeset =
       socket.assigns.activity
@@ -44,7 +44,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do
     {:noreply,
      socket
      |> assign(:has_description?, not has_description)
-     |> assign(:has_max_capacity?, has_capacity)
+     |> assign(:has_max_capacity?, not capacity_field_empty)
      |> assign_form(changeset)}
   end
 

lib/atomic_web/live/activity_live/form_component.html.heex

@@ -77,7 +77,7 @@
             <div class="mt-3 sm:mt-4 flex flex-col gap-y-1">
               <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
             </div>
-            <div class="-mt-2 sm:-mt-2 md:mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
+            <div class="-mt-2 sm:-mt-2 md:mt-4 flex flex-col gap-y-1 md:ml-8">
               <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:address]} label="Address" placeholder="Address" required />
             </div>
           </.inputs_for>
@@ -121,7 +121,7 @@
 
         <div class="mt-4 flex-grow">
           <div class="flex justify-center lg:justify-end">
-            <.button class="w-full p-5 lg:p-3" type="submit" phx-disable-with="Saving...">
+            <.button class="w-full p-4 lg:p-3" type="submit" phx-disable-with="Saving...">
               <%= if @action == :new do %>
                 <span><%= gettext("Create Activity") %></span>
               <% else %>

lib/atomic_web/live/activity_live/show.html.heex

@@ -82,7 +82,6 @@
                   </p>
                 </div>
               <% end %>
-              <!-- TODO: Support for multi-day activities -->
             </div>
           <% end %>
           <!-- Capacity -->
@@ -268,14 +267,17 @@
 <.modal :if={@participants_modal} show id="participants_modal" on_cancel={JS.push("handle_participants_modal")}>
   <span class="flex-l text-lg font-semibold text-gray-900">Participants</span>
   <%= if length(@participants) != 0 do %>
-    <div class="align-center mt-2 flex w-full flex-wrap place-items-center gap-4">
+  <div class="flex justify-center place-items-center w-full">
+    <div class="align-center mt-4 grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 w-fit">
       <%= for participant <- @participants do %>
-        <div class="flex h-6 items-center px-0 py-6">
+        <div class="flex h-10">
           <.avatar size={:xs} name={participant.name} type={:user} />
           <.link navigate={~p"/profile/#{participant.slug}"} class="ml-4 hover:underline"><%= participant.name %></.link>
         </div>
       <% end %>
     </div>
+  </div>
+
   <% else %>
     <div class="mt-4">
       <span>There are no participants for this activity</span>