Simplify record detail title + actions

lib/music_library_web/live/collection_live/show.html.heex

@@ -9,23 +9,10 @@
 
     <div class="grow">
       <div class="mt-4 md:mt-0 flex justify-between">
-        <div>
+        <h1 class="text-base font-medium leading-6 text-zinc-700">
-          <h1 class="text-base font-medium leading-6 text-zinc-700">
+          <.artist_links joinphrase_class="text-sm" artists={@record.artists} />
-            <.artist_links joinphrase_class="text-sm" artists={@record.artists} />
+        </h1>
-          </h1>
+        <div class="min-w-12 border-0 space-x-2 md:space-x-0">
-          <h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
-            {@record.title}
-          </h2>
-          <p class="mt-2 flex items-center text-sm text-zinc-500 dark:text-zinc-400">
-            <.record_colors record={@record} />
-            <span class="ml-1">
-              {Records.Record.format_release_date(@record.release_date)} · {format_label(
-                @record.format
-              )} · {type_label(@record.type)}
-            </span>
-          </p>
-        </div>
-        <div class="min-w-12 text-right">
           <button
             class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
             phx-click={MusicLibraryWeb.Components.Notes.open("record-notes-sheet")}
@@ -159,6 +146,19 @@
           </.dropdown>
         </div>
       </div>
+      <div>
+        <h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
+          {@record.title}
+        </h2>
+        <p class="mt-2 flex items-center text-sm text-zinc-500 dark:text-zinc-400">
+          <.record_colors record={@record} />
+          <span class="ml-1">
+            {Records.Record.format_release_date(@record.release_date)} · {format_label(
+              @record.format
+            )} · {type_label(@record.type)}
+          </span>
+        </p>
+      </div>
       <div class="mt-4 md:mt-8">
         <%!-- TODO: replace with OSS version --%>
         <dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">

lib/music_library_web/live/wishlist_live/show.html.heex

@@ -9,22 +9,9 @@
 
     <div class="grow">
       <div class="mt-4 md:mt-0 flex justify-between">
-        <div class="min-w-12">
+        <h1 class="text-base font-medium leading-6 text-zinc-700">
-          <h1 class="text-base font-medium leading-6 text-zinc-700">
+          <.artist_links joinphrase_class="text-sm" artists={@record.artists} />
-            <.artist_links joinphrase_class="text-sm" artists={@record.artists} />
+        </h1>
-          </h1>
-          <h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
-            {@record.title}
-          </h2>
-          <p class="flex items-center mt-2 text-sm text-zinc-500 dark:text-zinc-400">
-            <.record_colors record={@record} />
-            {Records.Record.format_release_date(@record.release_date)}
-            <span :if={@current_date && !Records.Record.released?(@record, @current_date)}>
-              ({gettext("Unreleased")})
-            </span>
-            · {format_label(@record.format)} · {type_label(@record.type)}
-          </p>
-        </div>
         <.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
           <:toggle class="h-5 block">
             <span class="sr-only">{gettext("Actions")}</span>
@@ -149,6 +136,19 @@
           </.focus_wrap>
         </.dropdown>
       </div>
+      <div>
+        <h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
+          {@record.title}
+        </h2>
+        <p class="flex items-center mt-2 text-sm text-zinc-500 dark:text-zinc-400">
+          <.record_colors record={@record} />
+          {Records.Record.format_release_date(@record.release_date)}
+          <span :if={@current_date && !Records.Record.released?(@record, @current_date)}>
+            ({gettext("Unreleased")})
+          </span>
+          · {format_label(@record.format)} · {type_label(@record.type)}
+        </p>
+      </div>
 
       <div class="mt-4 md:mt-8">
         <%!-- TODO: replace with OSS version --%>