Fix side padding inconsistencies in collection view

lib/music_library_web/components/core_components.ex

@@ -489,7 +489,7 @@ defmodule MusicLibraryWeb.CoreComponents do
         <tbody
           id={@id}
           phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
-          class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
+          class="relative divide-y divide-zinc-100 border-t border-b border-zinc-200 text-sm leading-6 text-zinc-700"
         >
           <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
             <td

lib/music_library_web/components/pagination.ex

@@ -11,10 +11,7 @@ defmodule MusicLibraryWeb.Pagination do
     assigns = assign(assigns, :page_links, page_links)
 
     ~H"""
-    <div
-      id={@id}
-      class="flex items-center justify-between border-t border-zinc-200 bg-white px-4 py-6 sm:px-6 mb-4"
-    >
+    <div id={@id} class="flex items-center justify-between bg-white px-4 py-6 mb-4">
       <%!-- Only on smallest viewport --%>
       <div class={[
         "flex flex-1 sm:hidden",

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

@@ -1,30 +1,32 @@
-<header class="gap-6 mb-2">
-  <h1 class="text-lg font-semibold leading-8 text-zinc-800">All Records</h1>
-  <div class="flex items-center justify-between gap-6 mb-2 mt-2">
-    <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
-      <input
-        type="search"
-        class="w-full rounded-lg text-zinc-900 border-gray-300 focus:border-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
-        id={:query}
-        name={:query}
-        value={@record_list_params.query}
-        placeholder="Search"
-        phx-debounce="500"
-        autocorrect="off"
-        autocapitalize="none"
-      />
-    </form>
-    <.link patch={~p"/records/import"}>
-      <.button>Import</.button>
-    </.link>
-  </div>
-</header>
+<div class="px-4 sm:px-0">
+  <header class="gap-6 mb-2">
+    <h1 class="text-lg font-semibold leading-8 text-zinc-800">All Records</h1>
+    <div class="flex items-center justify-between gap-6 mb-2 mt-2">
+      <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
+        <input
+          type="search"
+          class="w-full rounded-lg text-zinc-900 border-gray-300 focus:border-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
+          id={:query}
+          name={:query}
+          value={@record_list_params.query}
+          placeholder="Search"
+          phx-debounce="500"
+          autocorrect="off"
+          autocapitalize="none"
+        />
+      </form>
+      <.link patch={~p"/records/import"}>
+        <.button>Import</.button>
+      </.link>
+    </div>
+  </header>
 
-<p class="text-right text-base max-sm:text-xs mt-8">
-  Showing <b><%= Enum.count(@streams.records) %></b>
-  of <b><%= @record_list_params.total_entries %></b>
-  records
-</p>
+  <p class="text-right text-base max-sm:text-xs mt-8">
+    Showing <b><%= Enum.count(@streams.records) %></b>
+    of <b><%= @record_list_params.total_entries %></b>
+    records
+  </p>
+</div>
 
 <.table
   id="records"