Simplify counter styles positioning and padding

lib/music_library_web/components/stats_components.ex

@@ -53,42 +53,14 @@ defmodule MusicLibraryWeb.StatsComponents do
 
   def counter(assigns) do
     ~H"""
-    <div class="overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow-sm sm:px-6 sm:pt-6">
+    <div class="overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm flex justify-center items-center">
-      <dt class="sm:mt-3">
+      <div class="p-4 md:p-0">
-        <p class="truncate text-sm font-medium text-center text-zinc-500 dark:text-zinc-400">
+        <dt>
-          {@title}
+          <p class="truncate text-sm font-medium text-center text-zinc-500 dark:text-zinc-400">
-        </p>
+            {@title}
-      </dt>
+          </p>
-      <dd :if={!@tooltip} class="mt-1">
+        </dt>
-        <.link
+        <dd :if={!@tooltip} class="mt-1">
-          :if={@path}
-          navigate={@path}
-          class="block text-2xl sm:text-3xl font-semibold text-center text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
-        >
-          {@count}
-        </.link>
-        <p
-          :if={!@path}
-          class="block cursor-default text-2xl sm:text-3xl font-semibold text-center text-zinc-900 dark:text-zinc-300"
-        >
-          {@count}
-        </p>
-      </dd>
-      <dd :if={@tooltip} class="mt-1">
-        <.tooltip>
-          <:content>
-            <script :type={Phoenix.LiveView.ColocatedHook} name=".FormatNumber">
-              export default {
-                mounted() {
-                  this.el.innerText = parseInt(this.el.innerText).toLocaleString();
-                },
-                updated() {
-                  this.el.innerText = parseInt(this.el.innerText).toLocaleString();
-                }
-              }
-            </script>
-            <span id={"#{@title}-counter-tooltip"} phx-hook=".FormatNumber">{@tooltip}</span>
-          </:content>
           <.link
             :if={@path}
             navigate={@path}
@@ -102,8 +74,38 @@ defmodule MusicLibraryWeb.StatsComponents do
           >
             {@count}
           </p>
-        </.tooltip>
+        </dd>
-      </dd>
+        <dd :if={@tooltip} class="mt-1">
+          <.tooltip>
+            <:content>
+              <script :type={Phoenix.LiveView.ColocatedHook} name=".FormatNumber">
+                export default {
+                  mounted() {
+                    this.el.innerText = parseInt(this.el.innerText).toLocaleString();
+                  },
+                  updated() {
+                    this.el.innerText = parseInt(this.el.innerText).toLocaleString();
+                  }
+                }
+              </script>
+              <span id={"#{@title}-counter-tooltip"} phx-hook=".FormatNumber">{@tooltip}</span>
+            </:content>
+            <.link
+              :if={@path}
+              navigate={@path}
+              class="block text-2xl sm:text-3xl font-semibold text-center text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
+            >
+              {@count}
+            </.link>
+            <p
+              :if={!@path}
+              class="block cursor-default text-2xl sm:text-3xl font-semibold text-center text-zinc-900 dark:text-zinc-300"
+            >
+              {@count}
+            </p>
+          </.tooltip>
+        </dd>
+      </div>
     </div>
     """
   end