make app responsive

lib/cannery_web/live/ammo_group_live/form_component.html.heex

@@ -10,7 +10,7 @@
     phx-target={@myself}
     phx-change="validate"
     phx-submit="save"
-    class="grid grid-cols-3 justify-center items-center space-y-4"
+    class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-y-4"
   >
     <%= if @changeset.action && not @changeset.valid? do %>
       <div class="invalid-feedback col-span-3 text-center">

lib/cannery_web/live/ammo_group_live/index.html.heex

@@ -1,11 +1,12 @@
-<div class="mx-8 flex flex-col space-y-8 justify-center items-center">
+<div class="flex flex-col space-y-8 justify-center items-center">
   <h1 class="title text-2xl title-primary-500">
     <%= gettext("Ammo") %>
   </h1>
 
   <%= if @ammo_groups |> Enum.empty?() do %>
     <h2 class="title text-xl text-primary-500">
-      <%= gettext("No Ammo") %> <%= display_emoji("😔") %>
+      <%= gettext("No Ammo") %>
+      <%= display_emoji("😔") %>
     </h2>
 
     <%= live_patch(dgettext("actions", "Add your first box!"),
@@ -35,7 +36,7 @@
               <%= gettext("Notes") %>
             </th>
             <th class="p-2">
-              <%= gettext("Staging") %>
+              <%= gettext("Staged for Range") %>
             </th>
             <th class="p-2">
               <%= gettext("Container") %>
@@ -75,7 +76,7 @@
                   phx-click="toggle_staged"
                   phx-value-ammo_group_id={ammo_group.id}
                 >
-                  <%= if ammo_group.staged, do: gettext("Unstage from range"), else: gettext("Stage for range") %>
+                  <%= if ammo_group.staged, do: gettext("Unstage"), else: gettext("Stage") %>
                 </button>
               </td>
 
@@ -88,7 +89,7 @@
                 <% end %>
               </td>
 
-              <td class="p-2 w-full h-full space-x-2 flex justify-center items-center">
+              <td class="p-2">
                 <div class="px-4 py-2 space-x-4 flex justify-center items-center">
                   <%= live_redirect to: Routes.ammo_group_show_path(@socket, :show, ammo_group),
                                 class: "text-primary-500 link" do %>

lib/cannery_web/live/ammo_group_live/show.html.heex

@@ -24,25 +24,25 @@
     <% end %>
   </div>
 
-  <div class="flex space-x-4 justify-center items-center text-primary-500">
+  <div class="flex flex-wrap justify-center items-center text-primary-500">
     <%= live_patch(dgettext("actions", "Ammo Details"),
       to: Routes.ammo_type_show_path(Endpoint, :show, @ammo_group.ammo_type),
-      class: "btn btn-primary"
+      class: "mx-4 my-2 btn btn-primary"
     ) %>
 
     <%= live_patch to: Routes.ammo_group_show_path(Endpoint, :edit, @ammo_group),
-               class: "text-primary-500 link" do %>
+               class: "mx-4 my-2 text-primary-500 link" do %>
       <i class="fa-fw fa-lg fas fa-edit"></i>
     <% end %>
 
     <%= link to: "#",
-         class: "text-primary-500 link",
+         class: "mx-4 my-2 text-primary-500 link",
          phx_click: "delete",
          data: [confirm: dgettext("prompts", "Are you sure you want to delete this ammo?")] do %>
       <i class="fa-fw fa-lg fas fa-trash"></i>
     <% end %>
 
-    <button type="button" class="btn btn-primary" phx-click="toggle_staged">
+    <button type="button" class="mx-4 my-2 btn btn-primary" phx-click="toggle_staged">
       <%= if @ammo_group.staged, do: gettext("Unstage from range"), else: gettext("Stage for range") %>
     </button>
 

lib/cannery_web/live/ammo_type_live/form_component.html.heex

@@ -9,7 +9,7 @@
     phx-target={@myself}
     phx-change="validate"
     phx-submit="save"
-    class="grid grid-cols-3 justify-center items-center space-y-4"
+    class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-y-4"
   >
     <%= if @changeset.action && not @changeset.valid? do %>
       <div class="invalid-feedback col-span-3 text-center">

lib/cannery_web/live/ammo_type_live/index.html.heex

@@ -1,11 +1,12 @@
-<div class="mx-8 flex flex-col space-y-8 justify-center items-center">
+<div class="flex flex-col space-y-8 justify-center items-center">
   <h1 class="title text-2xl title-primary-500">
     <%= gettext("Ammo Types") %>
   </h1>
 
   <%= if @ammo_types |> Enum.empty?() do %>
     <h2 class="title text-xl text-primary-500">
-      <%= gettext("No Ammo Types") %> <%= display_emoji("😔") %>
+      <%= gettext("No Ammo Types") %>
+      <%= display_emoji("😔") %>
     </h2>
 
     <%= live_patch(dgettext("actions", "Add your first type!"),

lib/cannery_web/live/container_live/add_tag_component.html.heex

@@ -7,7 +7,7 @@
     let={f}
     for={:tag}
     id="add-tag-to-container-form"
-    class="grid grid-cols-3 justify-center items-center space-x-2"
+    class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-x-2"
     phx-target={@myself}
     phx-submit="save"
   >

lib/cannery_web/live/container_live/form_component.html.heex

@@ -6,7 +6,7 @@
     let={f}
     for={@changeset}
     id="container-form"
-    class="grid grid-cols-3 justify-center items-center space-y-4"
+    class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-y-4"
     phx-target={@myself}
     phx-change="validate"
     phx-submit="save"

lib/cannery_web/live/container_live/index.html.heex

@@ -5,7 +5,8 @@
 
   <%= if @containers |> Enum.empty?() do %>
     <h2 class="title text-xl text-primary-500">
-      <%= gettext("No containers") %> <%= display_emoji("😔") %>
+      <%= gettext("No containers") %>
+      <%= display_emoji("😔") %>
     </h2>
 
     <%= live_patch(dgettext("actions", "Add your first container!"),
@@ -19,7 +20,7 @@
     ) %>
   <% end %>
 
-  <div class="flex flex-row flex-wrap">
+  <div class="flex flex-row flex-wrap justify-center items-center">
     <%= for container <- @containers do %>
       <.container_card container={container}>
         <%= live_patch to: Routes.container_index_path(@socket, :edit, container),

lib/cannery_web/live/container_live/show.html.heex

@@ -44,7 +44,8 @@
   <%= if @container.tags |> Enum.empty?() do %>
     <div class="flex flex-row justify-center items-center space-x-4">
       <h2 class="title text-lg text-primary-500">
-        <%= gettext("No tags for this container") %> <%= display_emoji("😔") %>
+        <%= gettext("No tags for this container") %>
+        <%= display_emoji("😔") %>
       </h2>
 
       <%= live_patch(dgettext("actions", "Why not add one?"),

lib/cannery_web/live/invite_live/form_component.html.heex

@@ -6,7 +6,7 @@
     let={f}
     for={@changeset}
     id="invite-form"
-    class="grid grid-cols-3 justify-center items-center space-y-4"
+    class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-y-4"
     phx-target={@myself}
     phx-change="validate"
     phx-submit="save"

lib/cannery_web/live/invite_live/index.html.heex

@@ -5,7 +5,8 @@
 
   <%= if @invites |> Enum.empty?() do %>
     <h1 class="title text-xl text-primary-500">
-      <%= gettext("No invites") %> <%= display_emoji("😔") %>
+      <%= gettext("No invites") %>
+      <%= display_emoji("😔") %>
     </h1>
 
     <%= live_patch(dgettext("actions", "Invite someone new!"),
@@ -26,7 +27,7 @@
           <form phx-submit={JS.dispatch("cannery:clipcopy", to: "#code-#{invite.id}")}>
             <button
               type="submit"
-              class="btn btn-primary"
+              class="mx-2 my-1 btn btn-primary"
               phx-click="copy_to_clipboard"
               phx-value-invite_id={"#code-#{invite.id}"}
             >

lib/cannery_web/live/range_live/form_component.html.heex

@@ -7,7 +7,7 @@
     let={f}
     for={@changeset}
     id="shot-group-form"
-    class="grid grid-cols-3 justify-center items-center space-y-4"
+    class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-y-4"
     phx-target={@myself}
     phx-change="validate"
     phx-submit="save"

lib/cannery_web/live/range_live/index.html.heex

@@ -1,11 +1,12 @@
-<div class="mx-8 flex flex-col space-y-8 justify-center items-center">
+<div class="flex flex-col space-y-8 justify-center items-center">
   <h1 class="title text-2xl title-primary-500">
     <%= gettext("Range day") %>
   </h1>
 
   <%= if @ammo_groups |> Enum.empty?() do %>
     <h1 class="title text-xl text-primary-500">
-      <%= gettext("No ammo staged") %> <%= display_emoji("😔") %>
+      <%= gettext("No ammo staged") %>
+      <%= display_emoji("😔") %>
     </h1>
 
     <%= live_patch(dgettext("actions", "Why not get some ready to shoot?"),
@@ -42,7 +43,8 @@
 
   <%= if @shot_groups |> Enum.empty?() do %>
     <h1 class="title text-xl text-primary-500">
-      <%= gettext("No shots recorded") %> <%= display_emoji("😔") %>
+      <%= gettext("No shots recorded") %>
+      <%= display_emoji("😔") %>
     </h1>
   <% else %>
     <h1 class="title text-2xl text-primary-500">
@@ -89,18 +91,20 @@
               </td>
 
               <td class="p-2 w-full h-full space-x-2 flex justify-center items-center">
-                <%= live_patch to: Routes.range_index_path(Endpoint, :edit, shot_group),
-                           class: "text-primary-500 link" do %>
-                  <i class="fa-fw fa-lg fas fa-edit"></i>
-                <% end %>
+                <div class="px-4 py-2 space-x-4 flex justify-center items-center">
+                  <%= live_patch to: Routes.range_index_path(Endpoint, :edit, shot_group),
+                             class: "text-primary-500 link" do %>
+                    <i class="fa-fw fa-lg fas fa-edit"></i>
+                  <% end %>
 
-                <%= link to: "#",
-                     class: "text-primary-500 link",
-                     phx_click: "delete",
-                     phx_value_id: shot_group.id,
-                     data: [confirm: dgettext("prompts", "Are you sure you want to delete this shot record?")] do %>
-                  <i class="fa-fw fa-lg fas fa-trash"></i>
-                <% end %>
+                  <%= link to: "#",
+                       class: "text-primary-500 link",
+                       phx_click: "delete",
+                       phx_value_id: shot_group.id,
+                       data: [confirm: dgettext("prompts", "Are you sure you want to delete this shot record?")] do %>
+                    <i class="fa-fw fa-lg fas fa-trash"></i>
+                  <% end %>
+                </div>
               </td>
             </tr>
           <% end %>

lib/cannery_web/live/tag_live/form_component.ex

@@ -36,7 +36,7 @@ defmodule CanneryWeb.TagLive.FormComponent do
         let={f}
         for={@changeset}
         id="tag-form"
-        class="grid grid-cols-3 justify-center items-center space-y-4"
+        class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-y-4"
         phx-target={@myself}
         phx-change="validate"
         phx-submit="save"

lib/cannery_web/live/tag_live/index.html.heex

@@ -7,7 +7,8 @@
   </p>
   <%= if @tags |> Enum.empty?() do %>
     <h2 class="title text-xl text-primary-500">
-      <%= gettext("No tags") %> <%= display_emoji("😔") %>
+      <%= gettext("No tags") %>
+      <%= display_emoji("😔") %>
     </h2>
 
     <%= live_patch(dgettext("actions", "Make your first tag!"),
@@ -20,7 +21,7 @@
       class: "btn btn-primary"
     ) %>
   <% end %>
-  <div class="flex flex-row flex-wrap">
+  <div class="flex flex-row flex-wrap justify-center items-center">
     <%= for tag <- @tags do %>
       <.tag_card tag={tag}>
         <%= live_patch to: Routes.tag_index_path(Endpoint, :edit, tag),