From e12ab3dd082a33efe8fc687364edd45e8aa4860d Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sun, 8 Sep 2024 22:01:04 +0200
Subject: [PATCH] [web] Remove useless style elements

---
 web-src/src/App.vue                           |  2 -
 web-src/src/components/ControlDropdown.vue    |  2 -
 web-src/src/components/IndexButtonList.vue    | 13 ++++--
 web-src/src/components/ListAlbums.vue         | 43 ++++++++-----------
 web-src/src/components/ListAlbumsSpotify.vue  | 16 +++----
 web-src/src/components/ListArtists.vue        |  8 ++--
 web-src/src/components/ListArtistsSpotify.vue |  4 +-
 web-src/src/components/ListComposers.vue      |  8 ++--
 web-src/src/components/ListDirectories.vue    | 18 ++++----
 web-src/src/components/ListGenres.vue         |  8 ++--
 web-src/src/components/ListItemQueueItem.vue  | 12 +++---
 web-src/src/components/ListPlaylists.vue      | 10 ++---
 .../src/components/ListPlaylistsSpotify.vue   |  6 +--
 web-src/src/components/ListTracks.vue         | 22 ++++++----
 web-src/src/components/ListTracksSpotify.vue  | 14 +++---
 web-src/src/components/ModalDialogAddRss.vue  |  2 -
 .../components/ModalDialogAddUrlStream.vue    |  2 -
 .../components/ModalDialogAlbumSpotify.vue    |  4 +-
 web-src/src/components/ModalDialogArtist.vue  |  2 -
 .../components/ModalDialogArtistSpotify.vue   |  2 -
 .../src/components/ModalDialogComposer.vue    |  2 -
 .../src/components/ModalDialogDirectory.vue   |  2 -
 web-src/src/components/ModalDialogGenre.vue   |  2 -
 .../components/ModalDialogPlaylistSave.vue    |  2 -
 .../components/ModalDialogPlaylistSpotify.vue |  2 -
 .../src/components/ModalDialogQueueItem.vue   |  2 -
 .../components/ModalDialogRemotePairing.vue   |  2 -
 .../components/ModalDialogTrackSpotify.vue    |  2 -
 web-src/src/components/SettingsIntfield.vue   |  2 -
 web-src/src/components/SettingsTextfield.vue  |  2 -
 web-src/src/components/TabsAudiobooks.vue     |  2 -
 web-src/src/components/TabsMusic.vue          |  2 -
 web-src/src/components/TabsSearch.vue         |  2 -
 web-src/src/components/TabsSettings.vue       |  2 -
 web-src/src/pages/PageAlbum.vue               |  8 ++--
 web-src/src/pages/PageAlbumSpotify.vue        |  8 ++--
 web-src/src/pages/PageArtistSpotify.vue       |  2 -
 web-src/src/pages/PageAudiobooksAlbum.vue     |  8 ++--
 web-src/src/pages/PageAudiobooksAlbums.vue    |  4 +-
 web-src/src/pages/PageAudiobooksArtists.vue   |  5 +--
 web-src/src/pages/PageAudiobooksGenres.vue    |  4 +-
 web-src/src/pages/PageComposers.vue           |  4 +-
 web-src/src/pages/PageFiles.vue               |  2 -
 web-src/src/pages/PageGenreAlbums.vue         |  2 -
 web-src/src/pages/PageGenres.vue              |  4 +-
 web-src/src/pages/PageMusic.vue               |  4 +-
 web-src/src/pages/PageMusicRecentlyAdded.vue  |  4 +-
 web-src/src/pages/PageMusicRecentlyPlayed.vue |  4 +-
 web-src/src/pages/PageMusicSpotify.vue        |  4 +-
 .../PageMusicSpotifyFeaturedPlaylists.vue     |  4 +-
 .../src/pages/PageMusicSpotifyNewReleases.vue |  4 +-
 web-src/src/pages/PageNowPlaying.vue          |  2 -
 web-src/src/pages/PagePlaylistFolder.vue      |  2 -
 web-src/src/pages/PagePlaylistTracks.vue      |  2 -
 .../src/pages/PagePlaylistTracksSpotify.vue   |  2 -
 web-src/src/pages/PagePodcast.vue             |  8 ++--
 web-src/src/pages/PagePodcasts.vue            |  2 -
 web-src/src/pages/PageQueue.vue               |  9 +---
 web-src/src/pages/PageRadioStreams.vue        |  2 -
 web-src/src/pages/PageSearchLibrary.vue       |  4 +-
 web-src/src/pages/PageSearchSpotify.vue       |  4 +-
 web-src/src/pages/PageSettingsArtwork.vue     |  6 +--
 .../src/pages/PageSettingsOnlineServices.vue  |  8 ++--
 .../src/pages/PageSettingsWebinterface.vue    | 16 +++----
 web-src/src/templates/ContentWithHeading.vue  | 11 ++---
 web-src/src/templates/ContentWithHero.vue     |  2 -
 66 files changed, 126 insertions(+), 255 deletions(-)

diff --git a/web-src/src/App.vue b/web-src/src/App.vue
index ba8751e3..5a00b25b 100644
--- a/web-src/src/App.vue
+++ b/web-src/src/App.vue
@@ -360,5 +360,3 @@ export default {
   template: '<App/>'
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ControlDropdown.vue b/web-src/src/components/ControlDropdown.vue
index 16a723d8..f996a3fb 100644
--- a/web-src/src/components/ControlDropdown.vue
+++ b/web-src/src/components/ControlDropdown.vue
@@ -64,5 +64,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/IndexButtonList.vue b/web-src/src/components/IndexButtonList.vue
index 22b02623..74710b17 100644
--- a/web-src/src/components/IndexButtonList.vue
+++ b/web-src/src/components/IndexButtonList.vue
@@ -1,10 +1,10 @@
 <template>
   <section>
-    <nav class="buttons is-centered mb-4 fd-is-square">
+    <nav class="buttons is-centered mb-4">
       <router-link
         v-for="index in indices"
         :key="index"
-        class="button is-small"
+        class="button is-small is-square"
         :to="{ hash: `#index_${index}`, query: $route.query }"
       >
         {{ index }}
@@ -20,4 +20,11 @@ export default {
 }
 </script>
 
-<style></style>
+<style scoped>
+.is-square {
+  height: 1.75rem;
+  min-width: 1.75rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+</style>
diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 6e4814e5..7567cec6 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -1,6 +1,6 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
-    <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
+    <div v-if="!item.isItem" class="py-5">
       <span
         :id="`index_${item.index}`"
         class="tag is-info is-light is-small has-text-weight-bold"
@@ -8,30 +8,25 @@
       />
     </div>
     <div v-else class="media is-align-items-center" @click="open(item.item)">
-      <div
+      <cover-artwork
         v-if="settingsStore.show_cover_artwork_in_album_lists"
-        class="media-left"
-      >
-        <cover-artwork
-          :url="item.item.artwork_url"
-          :artist="item.item.artist"
-          :album="item.item.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
+        :url="item.item.artwork_url"
+        :artist="item.item.artist"
+        :album="item.item.name"
+        class="media-left is-clickable fd-has-shadow fd-cover fd-cover-small-image"
+      />
+
+      <div class="media-content is-clickable">
+        <p class="title is-6" v-text="item.item.name" />
+        <p
+          class="subtitle is-7 has-text-grey has-text-weight-bold"
+          v-text="item.item.artist"
+        />
+        <p
+          v-if="item.item.date_released && item.item.media_kind === 'music'"
+          class="subtitle is-7 has-text-grey"
+          v-text="$filters.date(item.item.date_released)"
         />
-      </div>
-      <div class="media-content is-clickable is-clipped">
-        <div>
-          <h1 class="title is-6" v-text="item.item.name" />
-          <h2
-            class="subtitle is-7 has-text-grey has-text-weight-bold"
-            v-text="item.item.artist"
-          />
-          <h2
-            v-if="item.item.date_released && item.item.media_kind === 'music'"
-            class="subtitle is-7 has-text-grey"
-            v-text="$filters.date(item.item.date_released)"
-          />
-        </div>
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item.item)">
@@ -148,5 +143,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListAlbumsSpotify.vue b/web-src/src/components/ListAlbumsSpotify.vue
index 435f1223..2f2dfda0 100644
--- a/web-src/src/components/ListAlbumsSpotify.vue
+++ b/web-src/src/components/ListAlbumsSpotify.vue
@@ -1,24 +1,24 @@
 <template>
   <template v-for="item in items" :key="item.id">
-    <div class="media is-align-items-center" @click="open(item)">
+    <div class="media is-align-items-center is-clickable" @click="open(item)">
       <div
         v-if="settingsStore.show_cover_artwork_in_album_lists"
-        class="media-left is-clickable"
+        class="media-left"
       >
         <cover-artwork
           :url="artwork_url(item)"
           :artist="item.artist"
           :album="item.name"
-          class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
+          class="fd-has-shadow fd-cover fd-cover-small-image"
         />
       </div>
-      <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.name" />
-        <h2
+      <div class="media-content is-clipped">
+        <p class="title is-6" v-text="item.name" />
+        <p
           class="subtitle is-7 has-text-grey has-text-weight-bold"
           v-text="item.artists[0]?.name"
         />
-        <h2
+        <p
           class="subtitle is-7 has-text-grey"
           v-text="
             [item.album_type, $filters.date(item.release_date)].join(', ')
@@ -76,5 +76,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue
index c289316b..00c254b7 100644
--- a/web-src/src/components/ListArtists.vue
+++ b/web-src/src/components/ListArtists.vue
@@ -1,7 +1,7 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
-    <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
-      <div class="media-content is-clipped">
+    <div v-if="!item.isItem" class="py-5">
+      <div class="media-content">
         <span
           :id="`index_${item.index}`"
           class="tag is-info is-light is-small has-text-weight-bold"
@@ -11,7 +11,7 @@
     </div>
     <div v-else class="media is-align-items-center" @click="open(item.item)">
       <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.item.name" />
+        <p class="title is-6" v-text="item.item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item.item)">
@@ -60,5 +60,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListArtistsSpotify.vue b/web-src/src/components/ListArtistsSpotify.vue
index c9a38e72..d8fcbf21 100644
--- a/web-src/src/components/ListArtistsSpotify.vue
+++ b/web-src/src/components/ListArtistsSpotify.vue
@@ -2,7 +2,7 @@
   <template v-for="item in items" :key="item.id">
     <div class="media is-align-items-center">
       <div class="media-content is-clickable is-clipped" @click="open(item)">
-        <h1 class="title is-6" v-text="item.name" />
+        <p class="title is-6" v-text="item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item)">
@@ -45,5 +45,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListComposers.vue b/web-src/src/components/ListComposers.vue
index 981e9bfd..fcf43af3 100644
--- a/web-src/src/components/ListComposers.vue
+++ b/web-src/src/components/ListComposers.vue
@@ -1,7 +1,7 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
-    <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
-      <div class="media-content is-clipped">
+    <div v-if="!item.isItem" class="py-5">
+      <div class="media-content">
         <span
           :id="`index_${item.index}`"
           class="tag is-info is-light is-small has-text-weight-bold"
@@ -11,7 +11,7 @@
     </div>
     <div v-else class="media is-align-items-center" @click="open(item.item)">
       <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.item.name" />
+        <p class="title is-6" v-text="item.item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item.item)">
@@ -62,5 +62,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListDirectories.vue b/web-src/src/components/ListDirectories.vue
index a17a9d3d..cc8149ef 100644
--- a/web-src/src/components/ListDirectories.vue
+++ b/web-src/src/components/ListDirectories.vue
@@ -1,9 +1,11 @@
 <template>
   <div v-if="$route.query.directory" class="media is-align-items-center">
-    <figure class="media-left is-clickable" @click="open_parent">
-      <mdicon class="icon" name="chevron-left" size="16" />
-    </figure>
-    <div class="media-content is-clipped">
+    <mdicon
+      class="icon media-left is-clickable"
+      name="chevron-left"
+      @click="open_parent"
+    />
+    <div class="media-content">
       <nav class="breadcrumb">
         <ul>
           <li v-for="directory in directories" :key="directory.index">
@@ -20,11 +22,9 @@
   </div>
   <template v-for="item in items" :key="item.path">
     <div class="media is-align-items-center" @click="open(item)">
-      <figure class="media-left is-clickable">
-        <mdicon class="icon" name="folder" size="16" />
-      </figure>
+      <mdicon class="media-left is-clickable icon" name="folder" />
       <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.name" />
+        <p class="title is-6" v-text="item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item)">
@@ -90,5 +90,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListGenres.vue b/web-src/src/components/ListGenres.vue
index 83cbbe2e..8450406b 100644
--- a/web-src/src/components/ListGenres.vue
+++ b/web-src/src/components/ListGenres.vue
@@ -1,7 +1,7 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
-    <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
-      <div class="media-content is-clipped">
+    <div v-if="!item.isItem" class="py-5">
+      <div class="media-content">
         <span
           :id="`index_${item.index}`"
           class="tag is-info is-light is-small has-text-weight-bold"
@@ -11,7 +11,7 @@
     </div>
     <div v-else class="media is-align-items-center" @click="open(item.item)">
       <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.item.name" />
+        <p class="title is-6" v-text="item.item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item.item)">
@@ -63,5 +63,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListItemQueueItem.vue b/web-src/src/components/ListItemQueueItem.vue
index cd57b4f8..d35dcaff 100644
--- a/web-src/src/components/ListItemQueueItem.vue
+++ b/web-src/src/components/ListItemQueueItem.vue
@@ -5,13 +5,13 @@
   >
     <div v-if="edit_mode" class="media-left">
       <mdicon
-        class="icon has-text-grey fd-is-movable handle"
+        class="icon has-text-grey fd-is-movable"
         name="drag-horizontal"
-        size="16"
+        size="18"
       />
     </div>
     <div class="media-content is-clickable is-clipped" @click="play">
-      <h1
+      <p
         class="title is-6"
         :class="{
           'has-text-primary': item.id === player.item_id,
@@ -19,7 +19,7 @@
         }"
         v-text="item.title"
       />
-      <h2
+      <p
         class="subtitle is-7 has-text-weight-bold"
         :class="{
           'has-text-primary': item.id === player.item_id,
@@ -28,7 +28,7 @@
         }"
         v-text="item.artist"
       />
-      <h2
+      <p
         class="subtitle is-7"
         :class="{
           'has-text-primary': item.id === player.item_id,
@@ -80,5 +80,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
index 505dc5a4..1c924ca9 100644
--- a/web-src/src/components/ListPlaylists.vue
+++ b/web-src/src/components/ListPlaylists.vue
@@ -1,11 +1,9 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
     <div class="media is-align-items-center" @click="open(item.item)">
-      <figure class="media-left is-clickable">
-        <mdicon class="icon" :name="icon_name(item.item)" size="16" />
-      </figure>
+      <mdicon class="media-left is-clickable icon" :name="icon(item.item)" />
       <div class="media-content is-clickable is-clipped">
-        <h1 class="title is-6" v-text="item.item.name" />
+        <p class="title is-6" v-text="item.item.name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item.item)">
@@ -39,7 +37,7 @@ export default {
   },
 
   methods: {
-    icon_name(item) {
+    icon(item) {
       if (item.type === 'folder') {
         return 'folder'
       } else if (item.type === 'rss') {
@@ -61,5 +59,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListPlaylistsSpotify.vue b/web-src/src/components/ListPlaylistsSpotify.vue
index 9536af64..8d507165 100644
--- a/web-src/src/components/ListPlaylistsSpotify.vue
+++ b/web-src/src/components/ListPlaylistsSpotify.vue
@@ -2,8 +2,8 @@
   <template v-for="item in items" :key="item.id">
     <div class="media is-align-items-center">
       <div class="media-content is-clickable is-clipped" @click="open(item)">
-        <h1 class="title is-6" v-text="item.name" />
-        <h2 class="subtitle is-7" v-text="item.owner.display_name" />
+        <p class="title is-6" v-text="item.name" />
+        <p class="subtitle is-7" v-text="item.owner.display_name" />
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item)">
@@ -46,5 +46,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ListTracks.vue b/web-src/src/components/ListTracks.vue
index e21ee3df..2340e08f 100644
--- a/web-src/src/components/ListTracks.vue
+++ b/web-src/src/components/ListTracks.vue
@@ -1,6 +1,6 @@
 <template>
   <template v-for="item in items" :key="item.itemId">
-    <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
+    <div v-if="!item.isItem" class="py-5">
       <span
         :id="`index_${item.index}`"
         class="tag is-info is-light is-small has-text-weight-bold"
@@ -13,11 +13,13 @@
       :class="{ 'with-progress': show_progress }"
       @click="play(item.item)"
     >
-      <figure v-if="show_icon" class="media-left is-clickable">
-        <mdicon class="icon" name="file-outline" size="16" />
-      </figure>
-      <div class="media-content is-clickable is-clipped">
-        <h1
+      <mdicon
+        v-if="show_icon"
+        class="media-left icon is-clickable"
+        name="file-outline"
+      />
+      <div class="media-content is-clipped">
+        <p
           class="title is-6"
           :class="{
             'has-text-grey':
@@ -25,11 +27,11 @@
           }"
           v-text="item.item.title"
         />
-        <h2
+        <p
           class="subtitle is-7 has-text-grey has-text-weight-bold"
           v-text="item.item.artist"
         />
-        <h2 class="subtitle is-7 has-text-grey" v-text="item.item.album" />
+        <p class="subtitle is-7 has-text-grey" v-text="item.item.album" />
         <progress
           v-if="show_progress && item.item.seek_ms > 0"
           class="progress is-info"
@@ -103,4 +105,8 @@ export default {
 .progress {
   height: 0.25rem;
 }
+
+.media.with-progress {
+  margin-top: 0.375rem;
+}
 </style>
diff --git a/web-src/src/components/ListTracksSpotify.vue b/web-src/src/components/ListTracksSpotify.vue
index 4aff9071..05919d2b 100644
--- a/web-src/src/components/ListTracksSpotify.vue
+++ b/web-src/src/components/ListTracksSpotify.vue
@@ -2,19 +2,19 @@
   <template v-for="item in items" :key="item.id">
     <div class="media is-align-items-center">
       <div
-        class="media-content is-clipped"
+        class="media-content"
         :class="{
           'is-clickable': item.is_playable,
           'fd-is-not-allowed': !item.is_playable
         }"
         @click="play(item)"
       >
-        <h1
+        <p
           class="title is-6"
           :class="{ 'has-text-grey-light': !item.is_playable }"
           v-text="item.name"
         />
-        <h2
+        <p
           class="subtitle is-7 has-text-weight-bold"
           :class="{
             'has-text-grey': item.is_playable,
@@ -22,8 +22,8 @@
           }"
           v-text="item.artists[0].name"
         />
-        <h2 class="subtitle is-7 has-text-grey" v-text="item.album.name" />
-        <h2 v-if="!item.is_playable" class="subtitle is-7">
+        <p class="subtitle is-7 has-text-grey" v-text="item.album.name" />
+        <p v-if="!item.is_playable" class="subtitle is-7">
           (<span v-text="$t('list.spotify.not-playable-track')" />
           <span
             v-if="item.restrictions?.reason"
@@ -33,7 +33,7 @@
               })
             "
           />)
-        </h2>
+        </p>
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(item)">
@@ -82,5 +82,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogAddRss.vue b/web-src/src/components/ModalDialogAddRss.vue
index 2bc3efaf..57aa56af 100644
--- a/web-src/src/components/ModalDialogAddRss.vue
+++ b/web-src/src/components/ModalDialogAddRss.vue
@@ -107,5 +107,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogAddUrlStream.vue b/web-src/src/components/ModalDialogAddUrlStream.vue
index 998ebcb3..6175c9e4 100644
--- a/web-src/src/components/ModalDialogAddUrlStream.vue
+++ b/web-src/src/components/ModalDialogAddUrlStream.vue
@@ -125,5 +125,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogAlbumSpotify.vue b/web-src/src/components/ModalDialogAlbumSpotify.vue
index 8a4407c6..0388ffbd 100644
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@@ -9,7 +9,7 @@
               :url="artwork_url(item)"
               :artist="item.artist"
               :album="item.name"
-              class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
+              class="fd-has-shadow fd-cover fd-cover-normal-image"
               @load="artwork_loaded"
               @error="artwork_error"
             />
@@ -133,5 +133,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogArtist.vue b/web-src/src/components/ModalDialogArtist.vue
index fb1663db..f3e94e4f 100644
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@@ -89,5 +89,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogArtistSpotify.vue b/web-src/src/components/ModalDialogArtistSpotify.vue
index dbc1a7d1..41490bc0 100644
--- a/web-src/src/components/ModalDialogArtistSpotify.vue
+++ b/web-src/src/components/ModalDialogArtistSpotify.vue
@@ -93,5 +93,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue
index 7e28c599..b20051cd 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -105,5 +105,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogDirectory.vue b/web-src/src/components/ModalDialogDirectory.vue
index d7c54461..81dd2409 100644
--- a/web-src/src/components/ModalDialogDirectory.vue
+++ b/web-src/src/components/ModalDialogDirectory.vue
@@ -66,5 +66,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogGenre.vue b/web-src/src/components/ModalDialogGenre.vue
index 2099668d..c719df57 100644
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -92,5 +92,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogPlaylistSave.vue b/web-src/src/components/ModalDialogPlaylistSave.vue
index 4d033a10..c214cb95 100644
--- a/web-src/src/components/ModalDialogPlaylistSave.vue
+++ b/web-src/src/components/ModalDialogPlaylistSave.vue
@@ -111,5 +111,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogPlaylistSpotify.vue b/web-src/src/components/ModalDialogPlaylistSpotify.vue
index 63fc7622..eda40cec 100644
--- a/web-src/src/components/ModalDialogPlaylistSpotify.vue
+++ b/web-src/src/components/ModalDialogPlaylistSpotify.vue
@@ -97,5 +97,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index 73426416..30a9dfb8 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -233,5 +233,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogRemotePairing.vue b/web-src/src/components/ModalDialogRemotePairing.vue
index 7615a6de..95d16e9d 100644
--- a/web-src/src/components/ModalDialogRemotePairing.vue
+++ b/web-src/src/components/ModalDialogRemotePairing.vue
@@ -98,5 +98,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/ModalDialogTrackSpotify.vue b/web-src/src/components/ModalDialogTrackSpotify.vue
index fcdef6c1..6c23e209 100644
--- a/web-src/src/components/ModalDialogTrackSpotify.vue
+++ b/web-src/src/components/ModalDialogTrackSpotify.vue
@@ -138,5 +138,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/SettingsIntfield.vue b/web-src/src/components/SettingsIntfield.vue
index 1b2de8d9..829da613 100644
--- a/web-src/src/components/SettingsIntfield.vue
+++ b/web-src/src/components/SettingsIntfield.vue
@@ -116,5 +116,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/SettingsTextfield.vue b/web-src/src/components/SettingsTextfield.vue
index f3a5f85b..8ac0d64e 100644
--- a/web-src/src/components/SettingsTextfield.vue
+++ b/web-src/src/components/SettingsTextfield.vue
@@ -117,5 +117,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/TabsAudiobooks.vue b/web-src/src/components/TabsAudiobooks.vue
index 8af3d9ef..e907a222 100644
--- a/web-src/src/components/TabsAudiobooks.vue
+++ b/web-src/src/components/TabsAudiobooks.vue
@@ -67,5 +67,3 @@ export default {
   name: 'TabsAudiobooks'
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index f1a1d466..8e27311b 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -129,5 +129,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/TabsSearch.vue b/web-src/src/components/TabsSearch.vue
index e36ae1a3..51e00ffb 100644
--- a/web-src/src/components/TabsSearch.vue
+++ b/web-src/src/components/TabsSearch.vue
@@ -53,5 +53,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/components/TabsSettings.vue b/web-src/src/components/TabsSettings.vue
index 11748c77..fcba379d 100644
--- a/web-src/src/components/TabsSettings.vue
+++ b/web-src/src/components/TabsSettings.vue
@@ -64,5 +64,3 @@ export default {
   name: 'TabsSettings'
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index abbdb754..72a250d7 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -2,10 +2,10 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <h1 class="title is-5" v-text="album.name" />
-        <h2 class="subtitle is-6 has-text-link">
+        <p class="title is-5" v-text="album.name" />
+        <p class="subtitle is-6 has-text-link">
           <a class="has-text-link" @click="open_artist" v-text="album.artist" />
-        </h2>
+        </p>
         <div class="buttons fd-is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="shuffle" size="16" />
@@ -104,5 +104,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAlbumSpotify.vue b/web-src/src/pages/PageAlbumSpotify.vue
index 411b5121..6fd936e0 100644
--- a/web-src/src/pages/PageAlbumSpotify.vue
+++ b/web-src/src/pages/PageAlbumSpotify.vue
@@ -2,14 +2,14 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <h1 class="title is-5" v-text="album.name" />
-        <h2 class="subtitle is-6 has-text-link">
+        <p class="title is-5" v-text="album.name" />
+        <p class="subtitle is-6 has-text-link">
           <a
             class="has-text-link"
             @click="open_artist"
             v-text="album.artists[0].name"
           />
-        </h2>
+        </p>
         <div class="buttons fd-is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="shuffle" size="16" />
@@ -127,5 +127,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageArtistSpotify.vue b/web-src/src/pages/PageArtistSpotify.vue
index 0c1ae4f5..e3fb0f0b 100644
--- a/web-src/src/pages/PageArtistSpotify.vue
+++ b/web-src/src/pages/PageArtistSpotify.vue
@@ -140,5 +140,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue
index fc5a3520..230cdd9b 100644
--- a/web-src/src/pages/PageAudiobooksAlbum.vue
+++ b/web-src/src/pages/PageAudiobooksAlbum.vue
@@ -2,10 +2,10 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <h1 class="title is-5" v-text="album.name" />
-        <h2 class="subtitle is-6 has-text-link">
+        <p class="title is-5" v-text="album.name" />
+        <p class="subtitle is-6 has-text-link">
           <a class="has-text-link" @click="open_artist" v-text="album.artist" />
-        </h2>
+        </p>
         <div class="buttons fd-is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="play" size="16" />
@@ -103,5 +103,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAudiobooksAlbums.vue b/web-src/src/pages/PageAudiobooksAlbums.vue
index 79ad9f52..56033054 100644
--- a/web-src/src/pages/PageAudiobooksAlbums.vue
+++ b/web-src/src/pages/PageAudiobooksAlbums.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-audiobooks />
     <content-with-heading>
       <template #options>
@@ -61,5 +61,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAudiobooksArtists.vue b/web-src/src/pages/PageAudiobooksArtists.vue
index 102ed2c5..26122c21 100644
--- a/web-src/src/pages/PageAudiobooksArtists.vue
+++ b/web-src/src/pages/PageAudiobooksArtists.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-audiobooks />
     <content-with-heading>
       <template #options>
@@ -12,7 +12,6 @@
           v-text="$t('page.audiobooks.artists.count', { count: artists.count })"
         />
       </template>
-      <template #heading-right />
       <template #content>
         <list-artists :items="artists" />
       </template>
@@ -62,5 +61,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageAudiobooksGenres.vue b/web-src/src/pages/PageAudiobooksGenres.vue
index 068b683c..229c2c22 100644
--- a/web-src/src/pages/PageAudiobooksGenres.vue
+++ b/web-src/src/pages/PageAudiobooksGenres.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-audiobooks />
     <content-with-heading>
       <template #options>
@@ -61,5 +61,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageComposers.vue b/web-src/src/pages/PageComposers.vue
index 9467b37e..b8c2386b 100644
--- a/web-src/src/pages/PageComposers.vue
+++ b/web-src/src/pages/PageComposers.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #options>
@@ -56,5 +56,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageFiles.vue b/web-src/src/pages/PageFiles.vue
index bd7c0dc5..1d55eae3 100644
--- a/web-src/src/pages/PageFiles.vue
+++ b/web-src/src/pages/PageFiles.vue
@@ -137,5 +137,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageGenreAlbums.vue b/web-src/src/pages/PageGenreAlbums.vue
index 435321aa..fec5068f 100644
--- a/web-src/src/pages/PageGenreAlbums.vue
+++ b/web-src/src/pages/PageGenreAlbums.vue
@@ -109,5 +109,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageGenres.vue b/web-src/src/pages/PageGenres.vue
index d13180fa..ae10a8d9 100644
--- a/web-src/src/pages/PageGenres.vue
+++ b/web-src/src/pages/PageGenres.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #options>
@@ -61,5 +61,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusic.vue b/web-src/src/pages/PageMusic.vue
index f2547200..070da1ae 100644
--- a/web-src/src/pages/PageMusic.vue
+++ b/web-src/src/pages/PageMusic.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -95,5 +95,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusicRecentlyAdded.vue b/web-src/src/pages/PageMusicRecentlyAdded.vue
index 2ef0844d..d4dfcdda 100644
--- a/web-src/src/pages/PageMusicRecentlyAdded.vue
+++ b/web-src/src/pages/PageMusicRecentlyAdded.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -62,5 +62,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusicRecentlyPlayed.vue b/web-src/src/pages/PageMusicRecentlyPlayed.vue
index 9fe21929..68c9ef2b 100644
--- a/web-src/src/pages/PageMusicRecentlyPlayed.vue
+++ b/web-src/src/pages/PageMusicRecentlyPlayed.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -51,5 +51,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusicSpotify.vue b/web-src/src/pages/PageMusicSpotify.vue
index 8e46abfd..2a1ea731 100644
--- a/web-src/src/pages/PageMusicSpotify.vue
+++ b/web-src/src/pages/PageMusicSpotify.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -102,5 +102,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue b/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
index a4fe8900..1ccb330d 100644
--- a/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
+++ b/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -60,5 +60,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageMusicSpotifyNewReleases.vue b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
index 05767726..7f427e45 100644
--- a/web-src/src/pages/PageMusicSpotifyNewReleases.vue
+++ b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-music />
     <content-with-heading>
       <template #heading-left>
@@ -57,5 +57,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue
index a2309d10..a6c1504e 100644
--- a/web-src/src/pages/PageNowPlaying.vue
+++ b/web-src/src/pages/PageNowPlaying.vue
@@ -196,5 +196,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PagePlaylistFolder.vue b/web-src/src/pages/PagePlaylistFolder.vue
index 44d454aa..334f83f5 100644
--- a/web-src/src/pages/PagePlaylistFolder.vue
+++ b/web-src/src/pages/PagePlaylistFolder.vue
@@ -89,5 +89,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PagePlaylistTracks.vue b/web-src/src/pages/PagePlaylistTracks.vue
index d6ecb791..23ea31ba 100644
--- a/web-src/src/pages/PagePlaylistTracks.vue
+++ b/web-src/src/pages/PagePlaylistTracks.vue
@@ -90,5 +90,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PagePlaylistTracksSpotify.vue b/web-src/src/pages/PagePlaylistTracksSpotify.vue
index 71e003c7..776d86b8 100644
--- a/web-src/src/pages/PagePlaylistTracksSpotify.vue
+++ b/web-src/src/pages/PagePlaylistTracksSpotify.vue
@@ -151,5 +151,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index 1a1ebd2b..ca0717cb 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/web-src/src/pages/PagePodcast.vue
@@ -2,10 +2,10 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <h1 class="title is-5" v-text="album.name" />
-        <h2 class="subtitle is-6">
+        <p class="title is-5" v-text="album.name" />
+        <p class="subtitle is-6">
           <br />
-        </h2>
+        </p>
         <div class="buttons fd-is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="play" size="16" />
@@ -147,5 +147,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue
index 08b0d160..56a3d576 100644
--- a/web-src/src/pages/PagePodcasts.vue
+++ b/web-src/src/pages/PagePodcasts.vue
@@ -145,5 +145,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageQueue.vue b/web-src/src/pages/PageQueue.vue
index c71f1440..ce59a232 100644
--- a/web-src/src/pages/PageQueue.vue
+++ b/web-src/src/pages/PageQueue.vue
@@ -51,12 +51,7 @@
         </div>
       </template>
       <template #content>
-        <draggable
-          v-model="queue_items"
-          handle=".handle"
-          item-key="id"
-          @end="move_item"
-        >
+        <draggable v-model="queue_items" item-key="id" @end="move_item">
           <template #item="{ element, index }">
             <list-item-queue-item
               :item="element"
@@ -208,5 +203,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageRadioStreams.vue b/web-src/src/pages/PageRadioStreams.vue
index 072e92e4..b9d74c88 100644
--- a/web-src/src/pages/PageRadioStreams.vue
+++ b/web-src/src/pages/PageRadioStreams.vue
@@ -48,5 +48,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSearchLibrary.vue b/web-src/src/pages/PageSearchLibrary.vue
index 540acf04..deba20d5 100644
--- a/web-src/src/pages/PageSearchLibrary.vue
+++ b/web-src/src/pages/PageSearchLibrary.vue
@@ -49,7 +49,7 @@
   </section>
   <tabs-search @search-library="search" @search-spotify="search_spotify" />
   <template v-for="[type, items] in results" :key="type">
-    <content-with-heading class="pt-0">
+    <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="$t(`page.search.${type}s`)" />
       </template>
@@ -226,5 +226,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSearchSpotify.vue b/web-src/src/pages/PageSearchSpotify.vue
index 154b1bfb..af1ae686 100644
--- a/web-src/src/pages/PageSearchSpotify.vue
+++ b/web-src/src/pages/PageSearchSpotify.vue
@@ -32,7 +32,7 @@
   </section>
   <tabs-search @search-library="search_library" @search-spotify="search" />
   <template v-for="[type, items] in results" :key="type">
-    <content-with-heading class="pt-0">
+    <content-with-heading>
       <template #heading-left>
         <p class="title is-4" v-text="$t(`page.spotify.search.${type}s`)" />
       </template>
@@ -227,5 +227,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSettingsArtwork.vue b/web-src/src/pages/PageSettingsArtwork.vue
index 83f2cde8..788bc811 100644
--- a/web-src/src/pages/PageSettingsArtwork.vue
+++ b/web-src/src/pages/PageSettingsArtwork.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-settings />
     <content-with-heading>
       <template #heading-left>
-        <div class="title is-4" v-text="$t('page.settings.artwork.artwork')" />
+        <p class="title is-4" v-text="$t('page.settings.artwork.artwork')" />
       </template>
       <template #content>
         <div
@@ -71,5 +71,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSettingsOnlineServices.vue b/web-src/src/pages/PageSettingsOnlineServices.vue
index c87bd37c..390f84ca 100644
--- a/web-src/src/pages/PageSettingsOnlineServices.vue
+++ b/web-src/src/pages/PageSettingsOnlineServices.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-settings />
     <content-with-heading>
       <template #heading-left>
-        <div
+        <p
           class="title is-4"
           v-text="$t('page.settings.services.spotify.title')"
         />
@@ -62,7 +62,7 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <div
+        <p
           class="title is-4"
           v-text="$t('page.settings.services.lastfm.title')"
         />
@@ -204,5 +204,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/pages/PageSettingsWebinterface.vue b/web-src/src/pages/PageSettingsWebinterface.vue
index f8bb4cdf..845214b3 100644
--- a/web-src/src/pages/PageSettingsWebinterface.vue
+++ b/web-src/src/pages/PageSettingsWebinterface.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="fd-page-with-tabs">
+  <div>
     <tabs-settings />
     <content-with-heading>
       <template #heading-left>
-        <div class="title is-4" v-text="$t('page.settings.general.language')" />
+        <p class="title is-4" v-text="$t('page.settings.general.language')" />
       </template>
       <template #content>
         <control-dropdown v-model:value="locale" :options="locales" />
@@ -11,8 +11,8 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <div
-          class="title is-4"
+        <p
+          class="title is-4 is-spaced"
           v-text="$t('page.settings.general.navigation-items')"
         />
       </template>
@@ -73,7 +73,7 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <div
+        <p
           class="title is-4"
           v-text="$t('page.settings.general.album-lists')"
         />
@@ -91,7 +91,7 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <div
+        <p
           class="title is-4"
           v-text="$t('page.settings.general.now-playing-page')"
         />
@@ -144,7 +144,7 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <div
+        <p
           class="title is-4"
           v-text="$t('page.settings.general.recently-added-page')"
         />
@@ -218,5 +218,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/templates/ContentWithHeading.vue b/web-src/src/templates/ContentWithHeading.vue
index 06eeae84..759bee69 100644
--- a/web-src/src/templates/ContentWithHeading.vue
+++ b/web-src/src/templates/ContentWithHeading.vue
@@ -3,12 +3,11 @@
     <div class="container">
       <div class="columns is-centered">
         <div class="column is-four-fifths">
-          <section v-if="$slots.options">
-            <div ref="options" style="height: 1px" />
+          <section v-if="$slots.options" ref="options">
             <slot name="options" />
-            <nav class="buttons is-centered mt-4 mb-2">
+            <nav class="buttons is-centered">
               <router-link class="button is-small is-white" :to="position">
-                <mdicon class="icon is-small" :name="icon_name" size="16" />
+                <mdicon class="icon" :name="icon" size="16" />
               </router-link>
             </nav>
           </section>
@@ -49,7 +48,7 @@ export default {
     }
   },
   computed: {
-    icon_name() {
+    icon() {
       return this.options_visible ? 'chevron-up' : 'chevron-down'
     },
     position() {
@@ -80,5 +79,3 @@ export default {
   }
 }
 </script>
-
-<style></style>
diff --git a/web-src/src/templates/ContentWithHero.vue b/web-src/src/templates/ContentWithHero.vue
index 2eb1a058..c51f0277 100644
--- a/web-src/src/templates/ContentWithHero.vue
+++ b/web-src/src/templates/ContentWithHero.vue
@@ -36,5 +36,3 @@
 </template>
 
 <script></script>
-
-<style></style>