Make charts responsive

lib/music_library_web/components/chart_components.ex

@@ -28,14 +28,19 @@ defmodule MusicLibraryWeb.ChartComponents do
       assigns
       |> assign(:padding, 40)
       |> assign(:max_value, max_value(assigns.data, assigns.value_fn))
-      # Account for labels
+      # Account for labels and padding
-      |> assign(:chart_width, assigns.width - 150)
+      |> assign(:chart_width, assigns.width - 150 - 40)
       # Account for bottom padding
       |> assign(:chart_height, assigns.height - 40)
       |> assign(:bar_height, calculate_bar_height(assigns.data, assigns.height - 40))
 
     ~H"""
-    <svg class={@class} width={@width} height={@height}>
+    <div class={["w-full", @class]}>
+      <svg
+        viewBox={"0 0 #{@width} #{@height}"}
+        preserveAspectRatio="xMidYMid meet"
+        class="w-full h-full"
+      >
         <%!-- X-axis labels and lines --%>
         <%= for {value, x} <- x_axis_values(@max_value, @chart_width) do %>
           <text
@@ -95,6 +100,7 @@ defmodule MusicLibraryWeb.ChartComponents do
           </text>
         <% end %>
       </svg>
+    </div>
     """
   end