.search_bar
  .song_search_container
    %input#search{name: "search", placeholder: "Search the song library", type: "text", data: {toggle: "searchresults", list: ".song-list"} }
.song_alphabet_container
  Browse by:
  %select#letter_picker
    %option Artist name
    - ('a'..'z').each do |letter|
      %option #{letter}
%ul.song-list
  - songs.each_with_index do |song, index|
    %li.catalog_entry
      %a(href="/song/#{song["id"]}/play")
        .artist #{song["artist"]}
        .title #{song["title"]}

.search_bar
  .song_search_container
    %input#search{name: "search", placeholder: "Search the song library", type: "text", data: {toggle: "searchresults", list: ".song-list"} }
.song_alphabet_container
  Browse by:
  %select#letter_picker
    %option Artist name
    - ('a'..'z').each do |letter|
      %option #{letter}
%ul.song-list
  - songs.each_with_index do |song, index|
    %li.catalog_entry
      .artist
        %a(href="/song/#{song["id"]}/play")
          #{song["artist"]}
      .title 
        %a(href="/song/#{song["id"]}/play")
          #{song["title"]}

Reduce clickable area for song list
Reduce clickable area for song list

Link is now on artist name and song title, not the div around them.
