Move status tooltip badge

lib/music_library_web/components/record_components.ex

@@ -126,11 +126,11 @@ defmodule MusicLibraryWeb.RecordComponents do
             <h1 class="text-sm/6 text-zinc-700">
               <.artist_links joinphrase_class="text-xs" artists={record.artists} />
             </h1>
-            <h2 class="mt-1 flex items-center gap-1 text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
+            <h2 class="mt-1 text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
               {record.title}
-              <.release_status_tooltip record={record} />
             </h2>
-            <p class="mt-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
+            <p class="flex items-center gap-1 mt-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
+              <.release_status_tooltip record={record} />
               {Records.Record.format_release_date(record.release_date)}
               <span :if={@current_date && !Records.Record.released?(record, @current_date)}>
                 ({gettext("Unreleased")})
@@ -376,10 +376,11 @@ defmodule MusicLibraryWeb.RecordComponents do
               <.artist_links joinphrase_class="text-xs" artists={record.artists} />
             </h1>
             <p class="pointer-events-none text-sm font-medium text-zinc-900 dark:text-zinc-300">
-              {record.title} <.release_status_tooltip record={record} />
+              {record.title}
             </p>
           </div>
-          <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+          <p class="flex items-center gap-1 pointer-events-none text-sm font-medium text-zinc-500">
+            <.release_status_tooltip record={record} />
             {format_label(record.format)} · {type_label(record.type)}
           </p>
           <p class="pointer-events-none block text-sm font-medium text-zinc-500">

lib/music_library_web/components/search_components.ex

@@ -50,12 +50,13 @@ defmodule MusicLibraryWeb.SearchComponents do
         </div>
         <div class="min-w-0 flex-1">
           <p class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
-            {@record.title} <.release_status_tooltip record={@record} />
+            {@record.title}
           </p>
           <p class="truncate text-sm font-medium text-zinc-500 dark:text-zinc-400">
             {Record.artist_names(@record)}
           </p>
-          <p class="pointer-events-none block text-sm text-zinc-500 dark:text-zinc-400">
+          <p class="flex items-center gap-1 pointer-events-none text-sm text-zinc-500 dark:text-zinc-400">
+            <.release_status_tooltip record={@record} />
             {format_label(@record.format)} · {type_label(@record.type)} ·
             <.icon
               name="hero-calendar-days"

lib/music_library_web/components/stats_components.ex

@@ -188,9 +188,9 @@ defmodule MusicLibraryWeb.StatsComponents do
                       </h1>
                       <h2 class="flex items-center gap-1 text-sm font-medium text-wrap text-zinc-700 dark:text-zinc-300">
                         {rep.title}
-                        <.release_status_tooltip record={rep} />
                       </h2>
                       <p class="text-xs/5 text-zinc-500 dark:text-zinc-400">
+                        <.release_status_tooltip record={rep} />
                         <.released_how_long_ago record={rep} current_date={@current_date} />
                         · {ngettext("1 release", "%{count} releases", length(records))}
                       </p>
@@ -261,9 +261,9 @@ defmodule MusicLibraryWeb.StatsComponents do
           </h1>
           <h2 class="flex items-center gap-1 text-sm font-medium text-wrap text-zinc-700 dark:text-zinc-300">
             {@record.title}
-            <.release_status_tooltip record={@record} />
           </h2>
           <p class="text-xs text-zinc-500 dark:text-zinc-400">
+            <.release_status_tooltip record={@record} />
             <.released_how_long_ago record={@record} current_date={@current_date} />
             · {format_label(@record.format)} · {type_label(@record.type)}
             <span :if={@record.purchased_at}>

lib/music_library_web/live/record_set_live/index.ex

@@ -397,11 +397,11 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
           <h2 class="mt-1 text-sm/6 text-zinc-700">
             <.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
           </h2>
-          <h3 class="flex items-center gap-1 text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
+          <h3 class="text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
             {item.record.title}
-            <.release_status_tooltip record={item.record} />
           </h3>
-          <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+          <p class="flex gap-1 items-center pointer-events-none text-sm font-medium text-zinc-500">
+            <.release_status_tooltip record={item.record} />
             {format_label(item.record.format)} · {type_label(item.record.type)}
           </p>
           <p class="pointer-events-none block text-sm font-medium text-zinc-500">

lib/music_library_web/live/record_set_live/record_picker.ex

@@ -94,12 +94,13 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
       </div>
       <div class="min-w-0 flex-auto">
         <p class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
-          {@record.title} <.release_status_tooltip record={@record} />
+          {@record.title}
         </p>
         <p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
           {Record.artist_names(@record)}
         </p>
-        <p class="mt-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
+        <p class="flex items-center gap-1 mt-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
+          <.release_status_tooltip record={@record} />
           {Record.format_release_date(@record.release_date)} · {format_label(@record.format)} · {type_label(
             @record.type
           )}

lib/music_library_web/live/record_set_live/show.ex

@@ -131,11 +131,11 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
               <h2 class="mt-1 text-sm/6 text-zinc-700">
                 <.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
               </h2>
-              <h3 class="flex items-center gap-1 text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
+              <h3 class="text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
                 {item.record.title}
-                <.release_status_tooltip record={item.record} />
               </h3>
-              <p class="pointer-events-none block text-sm font-medium text-zinc-500">
+              <p class="flex gap-1 items-center pointer-events-none text-sm font-medium text-zinc-500">
+                <.release_status_tooltip record={item.record} />
                 {format_label(item.record.format)} · {type_label(item.record.type)}
               </p>
               <p class="pointer-events-none block text-sm font-medium text-zinc-500">