From d8dddaaca5ced50aa214c8f57362bd3967d9d14e Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 3 Sep 2025 08:13:20 +0300
Subject: [PATCH] Simplify counter styles positioning and padding

---
 .../components/stats_components.ex            | 78 ++++++++++---------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/lib/music_library_web/components/stats_components.ex b/lib/music_library_web/components/stats_components.ex
index aa414dc4..4815dfce 100644
--- a/lib/music_library_web/components/stats_components.ex
+++ b/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">
-      <dt class="sm:mt-3">
-        <p class="truncate text-sm font-medium text-center text-zinc-500 dark:text-zinc-400">
-          {@title}
-        </p>
-      </dt>
-      <dd :if={!@tooltip} class="mt-1">
-        <.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>
-      </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>
+    <div class="overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm flex justify-center items-center">
+      <div class="p-4 md:p-0">
+        <dt>
+          <p class="truncate text-sm font-medium text-center text-zinc-500 dark:text-zinc-400">
+            {@title}
+          </p>
+        </dt>
+        <dd :if={!@tooltip} class="mt-1">
           <.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