From 871798c71a9d02233fc9096883502303525847cb Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sun, 9 Nov 2025 19:20:34 +0000
Subject: [PATCH] Improve selected options formatting

---
 lib/music_library_web/components/search_components.ex | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/lib/music_library_web/components/search_components.ex b/lib/music_library_web/components/search_components.ex
index 93930f6c..eb8cbc0b 100644
--- a/lib/music_library_web/components/search_components.ex
+++ b/lib/music_library_web/components/search_components.ex
@@ -27,7 +27,7 @@ defmodule MusicLibraryWeb.SearchComponents do
       class={[
         "p-3 rounded-lg cursor-pointer transition-colors",
         "hover:bg-zinc-50 dark:hover:bg-zinc-700",
-        "aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-500"
+        "aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
       ]}
       role="option"
       {@rest}
@@ -75,7 +75,7 @@ defmodule MusicLibraryWeb.SearchComponents do
       class={[
         "p-3 rounded-lg cursor-pointer transition-colors",
         "hover:bg-zinc-50 dark:hover:bg-zinc-700",
-        "aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-500"
+        "aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700"
       ]}
       role="option"
       {@rest}
@@ -139,7 +139,7 @@ defmodule MusicLibraryWeb.SearchComponents do
         {render_slot(@inner_block)}
       </div>
 
-      <div :for={action <- @actions} class="mt-3">
+      <div :for={action <- @actions} class="px-2 mt-3">
         {render_slot(action)}
       </div>
     </div>
@@ -160,7 +160,8 @@ defmodule MusicLibraryWeb.SearchComponents do
   def view_all_button(assigns) do
     ~H"""
     <button
-      class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors"
+      role="option"
+      class="aria-selected:bg-zinc-200 dark:aria-selected:bg-zinc-700 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors"
       {@rest}
     >
       {gettext("View all %{count} %{target} results →", count: @count, target: @target)}