Don't hardcode column classes in stats

The Tailwind build step requires all needed classes to be explicitly
referenced in the source code, and not dynamically generated. This
implies that one cannot (for example) interpolate a number in a class
name.

lib/music_library_web/live/stats_live/index.ex

@@ -34,4 +34,22 @@ defmodule MusicLibraryWeb.StatsLive.Index do
        nav_section: :stats
      )}
   end
+
+  # The Tailwind build step requires all needed classes to be explicitly referenced
+  # in the source code, and not dynamically generated. This implies that one cannot
+  # (for example) interpolate a number in a class name.
+  defp stats_class(collection) do
+    case Enum.count(collection) do
+      1 -> "grid-cols-1"
+      2 -> "grid-cols-2"
+      3 -> "grid-cols-3"
+      4 -> "grid-cols-4"
+      5 -> "grid-cols-5"
+      6 -> "grid-cols-6"
+      7 -> "grid-cols-7"
+      8 -> "grid-cols-8"
+      9 -> "grid-cols-9"
+      _other -> ""
+    end
+  end
 end

lib/music_library_web/live/stats_live/index.html.heex

@@ -17,7 +17,10 @@
   <h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
     <%= gettext("Formats") %>
   </h1>
-  <dl class="mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow grid-cols-5 divide-x">
+  <dl class={[
+    "mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
+    stats_class(@collection_count_by_format)
+  ]}>
     <div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
       <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center max-sm:text-xs break-keep">
         <%= Record.format_long_label(format) %>
@@ -38,7 +41,10 @@
   <h1 class="mt-5 text-base lg:text-2xl text-gray-900 dark:text-gray-200 font-semibold">
     <%= gettext("Types") %>
   </h1>
-  <dl class="mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow grid-cols-6 divide-x">
+  <dl class={[
+    "mt-5 grid divide-gray-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
+    stats_class(@collection_count_by_type)
+  ]}>
     <div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
       <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center max-sm:text-xs break-keep">
         <%= Record.type_long_label(type) %>