fix grid spacing in mobile mode

CHANGELOG.md

@@ -1,5 +1,6 @@
-# 0.3.0
--
+# 0.2.1
+- Fix checkbox spacing for mobile view
+- Fix spacing with form elements in mobile view
 
 # 0.2.0
 - Add or remove tags from containers list and details page

assets/css/components.scss

@@ -17,8 +17,7 @@
     -o-transform: scale(1.5);
     transform: scale(1.5);
     padding: 10px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 1em auto;
   }
 
   .title {

lib/cannery_web/components/add_shot_group_component.html.heex

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

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="flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+    class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
   >
     <%= if @changeset.action && not @changeset.valid? do %>
       <div class="invalid-feedback col-span-3 text-center">

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="flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+    class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
   >
     <%= if @changeset.action && not @changeset.valid? do %>
       <div class="invalid-feedback col-span-3 text-center">

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

@@ -40,7 +40,7 @@
       let={f}
       for={:tag}
       id="add-tag-to-container-form"
-      class="flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+      class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
       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="flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+    class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
     phx-target={@myself}
     phx-change="validate"
     phx-submit="save"

lib/cannery_web/live/home_live.ex

@@ -130,7 +130,7 @@ defmodule CanneryWeb.HomeLive do
         <li class="flex flex-row justify-center space-x-2">
           <b>Version:</b>
           <p>
-            0.2.0
+            0.2.1
           </p>
         </li>
       </ul>

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

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

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

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

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="flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+        class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
         phx-target={@myself}
         phx-change="validate"
         phx-submit="save"

lib/cannery_web/templates/user_confirmation/new.html.heex

@@ -7,7 +7,7 @@
            Routes.user_confirmation_path(@conn, :create),
            [
              class:
-               "flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
            ],
            fn f -> %>
     <%= label(f, :email, class: "title text-lg text-primary-600") %>

lib/cannery_web/templates/user_registration/new.html.heex

@@ -7,7 +7,7 @@
            Routes.user_registration_path(@conn, :create),
            [
              class:
-               "flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
            ],
            fn f -> %>
     <%= if @changeset.action && not @changeset.valid? do %>

lib/cannery_web/templates/user_reset_password/edit.html.heex

@@ -7,7 +7,7 @@
            Routes.user_reset_password_path(@conn, :update, @token),
            [
              class:
-               "flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
            ],
            fn f -> %>
     <%= if @changeset.action && not @changeset.valid? do %>

lib/cannery_web/templates/user_reset_password/new.html.heex

@@ -7,7 +7,7 @@
            Routes.user_reset_password_path(@conn, :create),
            [
              class:
-               "flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
            ],
            fn f -> %>
     <%= label(f, :email, class: "title text-lg text-primary-600") %>

lib/cannery_web/templates/user_session/new.html.heex

@@ -8,7 +8,7 @@
            [
              as: :user,
              class:
-               "flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
            ],
            fn f -> %>
     <%= if @error_message do %>

lib/cannery_web/templates/user_settings/edit.html.heex

@@ -9,7 +9,7 @@
            Routes.user_settings_path(@conn, :update),
            [
              class:
-               "pb-4 text-center flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
            ],
            fn f -> %>
     <h3 class="title text-primary-600 text-lg col-span-3">
@@ -53,7 +53,7 @@
            Routes.user_settings_path(@conn, :update),
            [
              class:
-               "pb-4 text-center flex flex-col sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
            ],
            fn f -> %>
     <h3 class="title text-primary-600 text-lg col-span-3">

mix.exs

@@ -4,7 +4,7 @@ defmodule Cannery.MixProject do
   def project do
     [
       app: :cannery,
-      version: "0.2.0",
+      version: "0.2.1",
       elixir: "~> 1.12",
       elixirc_paths: elixirc_paths(Mix.env()),
       compilers: [:gettext] ++ Mix.compilers(),