Improve wording and layout of scrobbled tracks order buttons

lib/music_library_web/live/scrobbled_tracks_live/index.ex

@@ -31,7 +31,7 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
           <.button_group>
             <.button
               patch={order_path(@track_list_params, :scrobbled_at)}
-              size="xs"
+              size="sm"
               class={[
                 @track_list_params.order == :scrobbled_at && "bg-zinc-100! dark:bg-zinc-700!"
               ]}
@@ -42,37 +42,37 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
                 aria-hidden="true"
                 data-slot="icon"
               />
-              {gettext("Scrobbled")}
+              <span class="sr-only sm:not-sr-only">{gettext("Timestamp")}</span>
             </.button>
             <.button
               patch={order_path(@track_list_params, :title)}
-              size="xs"
+              size="sm"
               class={[
                 @track_list_params.order == :title && "bg-zinc-100! dark:bg-zinc-700!"
               ]}
             >
               <.icon name="hero-musical-note-solid" class="icon" aria-hidden="true" data-slot="icon" />
-              {gettext("Title")}
+              <span class="sr-only sm:not-sr-only">{gettext("Title")}</span>
             </.button>
             <.button
               patch={order_path(@track_list_params, :artist)}
-              size="xs"
+              size="sm"
               class={[
                 @track_list_params.order == :artist && "bg-zinc-100! dark:bg-zinc-700!"
               ]}
             >
               <.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
-              {gettext("Artist")}
+              <span class="sr-only sm:not-sr-only">{gettext("Artist")}</span>
             </.button>
             <.button
               patch={order_path(@track_list_params, :album)}
-              size="xs"
+              size="sm"
               class={[
                 @track_list_params.order == :album && "bg-zinc-100! dark:bg-zinc-700!"
               ]}
             >
-              <.icon name="hero-musical-note-solid" class="icon" aria-hidden="true" data-slot="icon" />
-              {gettext("Album")}
+              <.icon name="hero-numbered-list-solid" class="icon" aria-hidden="true" data-slot="icon" />
+              <span class="sr-only sm:not-sr-only">{gettext("Album")}</span>
             </.button>
           </.button_group>
           <.refresh_lastfm_feed_button />

priv/gettext/default.pot

@@ -1251,11 +1251,6 @@ msgstr ""
 msgid "No scrobbled tracks found"
 msgstr ""
 
-#: lib/music_library_web/live/scrobbled_tracks_live/index.ex
-#, elixir-autogen, elixir-format
-msgid "Scrobbled"
-msgstr ""
-
 #: lib/music_library_web/components/layouts/app.html.heex
 #: lib/music_library_web/live/scrobbled_tracks_live/index.ex
 #, elixir-autogen, elixir-format
@@ -2291,3 +2286,8 @@ msgstr[1] ""
 #, elixir-autogen, elixir-format
 msgid "Print tracklist"
 msgstr ""
+
+#: lib/music_library_web/live/scrobbled_tracks_live/index.ex
+#, elixir-autogen, elixir-format
+msgid "Timestamp"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -1251,11 +1251,6 @@ msgstr ""
 msgid "No scrobbled tracks found"
 msgstr ""
 
-#: lib/music_library_web/live/scrobbled_tracks_live/index.ex
-#, elixir-autogen, elixir-format, fuzzy
-msgid "Scrobbled"
-msgstr ""
-
 #: lib/music_library_web/components/layouts/app.html.heex
 #: lib/music_library_web/live/scrobbled_tracks_live/index.ex
 #, elixir-autogen, elixir-format, fuzzy
@@ -2291,3 +2286,8 @@ msgstr[1] ""
 #, elixir-autogen, elixir-format
 msgid "Print tracklist"
 msgstr ""
+
+#: lib/music_library_web/live/scrobbled_tracks_live/index.ex
+#, elixir-autogen, elixir-format
+msgid "Timestamp"
+msgstr ""