Fix playlist header button spacing

Previously there was no spacing between the "Play all" and "Edit"
button in the playlist view. This fixes the issue by putting all
header buttons into their own "ui buttons" div similar to the
ArtistBase.vue component.

changes/changelog.d/1271.enhancement

@@ -0,0 +1 @@
+Add spacing after "Play all" button in playlist view (!1271)

front/src/views/playlists/Detail.vue

@@ -22,7 +22,11 @@
           </div>
         </h2>
         <div class="ui hidden divider"></div>
+        <div class="header-buttons">
+          <div class="ui buttons">
             <play-button class="vibrant" :is-playable="playlist.is_playable" :tracks="tracks"><translate translate-context="Content/Queue/Button.Label/Short, Verb">Play all</translate></play-button>
+          </div>
+          <div class="ui buttons">
             <button
               class="ui icon labeled button"
               v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id"
@@ -31,6 +35,8 @@
               <template v-if="edit"><translate translate-context="Content/Playlist/Button.Label/Verb">Stop Editing</translate></template>
               <template v-else><translate translate-context="Content/*/Button.Label/Verb">Edit</translate></template>
             </button>
+          </div>
+          <div class="ui buttons">	
             <button
               class="ui icon labeled button"
               v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
@@ -38,7 +44,6 @@
               <i class="code icon"></i>
               <translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
             </button>
-
             <dangerous-button v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id" class="ui labeled danger icon button" :action="deletePlaylist">
               <i class="trash icon"></i> <translate translate-context="*/*/*/Verb">Delete</translate>
               <p slot="modal-header" v-translate="{playlist: playlist.name}" translate-context="Popup/Playlist/Title/Call to action" :translate-params="{playlist: playlist.name}">
@@ -48,6 +53,7 @@
               <div slot="modal-confirm"><translate translate-context="Popup/Playlist/Button.Label/Verb">Delete playlist</translate></div>
             </dangerous-button>
           </div>
+        </div>
         <modal v-if="playlist.privacy_level === 'everyone' && playlist.is_playable" :show.sync="showEmbedModal">
         <h4 class="header">
           <translate translate-context="Popup/Album/Title/Verb">Embed this playlist on your website</translate>
@@ -63,6 +69,7 @@
           </button>
         </div>
         </modal>
+      </div>
     </section>
     <section class="ui vertical stripe segment">
       <template v-if="edit">