Hardcode top 30 results, fix padding

lib/music_library/records.ex

@@ -279,6 +279,7 @@ defmodule MusicLibrary.Records do
            from records, json_each(records.artists) artist
            group by name
            order by count desc
+           limit 30
            """),
            select: {fragment("name"), fragment("count")}
 
@@ -296,6 +297,7 @@ defmodule MusicLibrary.Records do
            from records, json_each(records.genres) genre
            group by name
            order by count desc
+           limit 30
            """),
            select: {fragment("name"), fragment("count")}
 

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

@@ -73,11 +73,11 @@
     <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
       {gettext("Records by Artist")}
     </h1>
-    <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm p-4">
+    <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
       <.vertical_bar_chart
         data={@records_by_artist}
         width={600}
-        height={600}
+        height={35 * length(@records_by_artist)}
         bar_color="rgb(79, 70, 229)"
         class="w-full"
       />
@@ -88,11 +88,11 @@
     <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
       {gettext("Records by Genre")}
     </h1>
-    <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm p-4">
+    <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
       <.vertical_bar_chart
         data={@records_by_genre}
         width={600}
-        height={600}
+        height={35 * length(@records_by_genre)}
         bar_color="rgb(244, 63, 94)"
         class="w-full"
       />