Standardize all icon-based actions to buttons

Use a combination of ghost and soft, with button groups where
appropriate. Also remove unnecessary negative margins, and pad around
for ease of use on mobile.

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

@@ -58,18 +58,18 @@
             {Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
           </span>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center p-2">
           <.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
             <:toggle>
-              <div>
+              <.button variant="ghost">
                 <span class="sr-only">{gettext("Actions")}</span>
                 <.icon
                   name="hero-ellipsis-vertical"
-                  class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
+                  class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
                   aria-hidden="true"
                   data-slot="icon"
                 />
-              </div>
+              </.button>
             </:toggle>
             <.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
               {gettext("Apply rule")}