From 0e3490e589cd998557e9a8ff999e20427e07fe6f Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Wed, 1 Jan 2025 21:13:48 +0100
Subject: [PATCH] [web] Remove the non-standard heading class

---
 web-src/src/components/ControlMainVolume.vue  |   2 +-
 .../src/components/ControlOutputVolume.vue    |   4 +-
 .../src/components/ControlStreamVolume.vue    |   4 +-
 web-src/src/components/ListItemQueueItem.vue  |  17 +-
 web-src/src/components/ModalDialogAlbum.vue   | 104 ++++----
 .../components/ModalDialogAlbumSpotify.vue    |  53 ++--
 web-src/src/components/ModalDialogArtist.vue  |  50 ++--
 .../components/ModalDialogArtistSpotify.vue   |  37 +--
 .../src/components/ModalDialogComposer.vue    |  47 ++--
 web-src/src/components/ModalDialogGenre.vue   |  45 ++--
 .../src/components/ModalDialogPlaylist.vue    |  39 +--
 .../components/ModalDialogPlaylistSpotify.vue |  39 +--
 .../src/components/ModalDialogQueueItem.vue   | 192 ++++++++-------
 web-src/src/components/ModalDialogTrack.vue   | 233 ++++++++++--------
 .../components/ModalDialogTrackSpotify.vue    | 102 ++++----
 web-src/src/mystyles.scss                     |   8 -
 web-src/src/pages/PageAlbum.vue               |  12 +-
 web-src/src/pages/PageAlbumSpotify.vue        |  16 +-
 web-src/src/pages/PageAlbums.vue              |  16 +-
 web-src/src/pages/PageArtist.vue              |  33 +--
 web-src/src/pages/PageArtistSpotify.vue       |  10 +-
 web-src/src/pages/PageArtistTracks.vue        |  31 ++-
 web-src/src/pages/PageArtists.vue             |  16 +-
 web-src/src/pages/PageAudiobooksAlbum.vue     |  12 +-
 web-src/src/pages/PageAudiobooksAlbums.vue    |   2 +-
 web-src/src/pages/PageAudiobooksArtist.vue    |  18 +-
 web-src/src/pages/PageAudiobooksArtists.vue   |   6 +-
 web-src/src/pages/PageAudiobooksGenres.vue    |   6 +-
 web-src/src/pages/PageComposerAlbums.vue      |  31 ++-
 web-src/src/pages/PageComposerTracks.vue      |  40 +--
 web-src/src/pages/PageComposers.vue           |   6 +-
 web-src/src/pages/PageGenreAlbums.vue         |  23 +-
 web-src/src/pages/PageGenreTracks.vue         |  28 ++-
 web-src/src/pages/PageGenres.vue              |   6 +-
 web-src/src/pages/PagePlaylistFolder.vue      |   6 +-
 web-src/src/pages/PagePlaylistTracks.vue      |   8 +-
 .../src/pages/PagePlaylistTracksSpotify.vue   |  12 +-
 web-src/src/pages/PagePodcast.vue             |  10 +-
 web-src/src/pages/PagePodcasts.vue            |   6 +-
 web-src/src/pages/PageQueue.vue               |   6 +-
 web-src/src/pages/PageRadioStreams.vue        |   6 +-
 41 files changed, 720 insertions(+), 622 deletions(-)

diff --git a/web-src/src/components/ControlMainVolume.vue b/web-src/src/components/ControlMainVolume.vue
index e3252459..7d0c4c60 100644
--- a/web-src/src/components/ControlMainVolume.vue
+++ b/web-src/src/components/ControlMainVolume.vue
@@ -6,7 +6,7 @@
       </a>
     </div>
     <div class="media-content">
-      <p class="heading" v-text="$t('navigation.volume')" />
+      <div class="is-size-7 is-uppercase" v-text="$t('navigation.volume')" />
       <control-slider
         v-model:value="player.volume"
         :cursor="cursor"
diff --git a/web-src/src/components/ControlOutputVolume.vue b/web-src/src/components/ControlOutputVolume.vue
index 96c3004f..7886043b 100644
--- a/web-src/src/components/ControlOutputVolume.vue
+++ b/web-src/src/components/ControlOutputVolume.vue
@@ -10,8 +10,8 @@
       </a>
     </div>
     <div class="media-content">
-      <p
-        class="heading"
+      <div
+        class="is-size-7 is-uppercase"
         :class="{ 'has-text-grey-light': !output.selected }"
         v-text="output.name"
       />
diff --git a/web-src/src/components/ControlStreamVolume.vue b/web-src/src/components/ControlStreamVolume.vue
index af8005df..a754630b 100644
--- a/web-src/src/components/ControlStreamVolume.vue
+++ b/web-src/src/components/ControlStreamVolume.vue
@@ -17,8 +17,8 @@
         class="is-flex is-align-content-center"
         :class="{ 'has-text-grey-light': !playing }"
       >
-        <p class="heading" v-text="$t('navigation.stream')" />
-        <a href="stream.mp3" class="heading ml-2" target="_blank">
+        <div class="is-size-7 is-uppercase" v-text="$t('navigation.stream')" />
+        <a href="stream.mp3" class="ml-2" target="_blank">
           <mdicon class="icon is-small" name="open-in-new" />
         </a>
       </div>
diff --git a/web-src/src/components/ListItemQueueItem.vue b/web-src/src/components/ListItemQueueItem.vue
index 0625c8c5..db17d2a0 100644
--- a/web-src/src/components/ListItemQueueItem.vue
+++ b/web-src/src/components/ListItemQueueItem.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     v-if="is_next || !show_only_next_items"
-    class="media is-align-items-center"
+    class="media is-align-items-center is-clickable mb-0"
+    @click="play"
   >
     <div v-if="edit_mode" class="media-left">
       <mdicon
@@ -10,17 +11,17 @@
         size="18"
       />
     </div>
-    <div class="media-content is-clickable is-clipped" @click="play">
-      <p
-        class="title is-6"
+    <div class="media-content">
+      <div
+        class="is-size-6 has-text-weight-bold"
         :class="{
           'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next
         }"
         v-text="item.title"
       />
-      <p
-        class="subtitle is-7 has-text-weight-bold"
+      <div
+        class="is-size-7 has-text-weight-bold"
         :class="{
           'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next,
@@ -28,8 +29,8 @@
         }"
         v-text="item.artist"
       />
-      <p
-        class="subtitle is-7"
+      <div
+        class="is-size-7"
         :class="{
           'has-text-primary': item.id === player.item_id,
           'has-text-grey-light': !is_next,
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index d70c40b0..66ea45d5 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -1,15 +1,15 @@
 <template>
   <base-modal :show="show" @close="$emit('close')">
     <template #content>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
+      </div>
       <cover-artwork
         :url="item.artwork_url"
         :artist="item.artist"
         :album="item.name"
-        class="fd-has-shadow fd-cover fd-cover-normal-image"
+        class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
       />
-      <p class="title is-4">
-        <a class="has-text-link" @click="open" v-text="item.name" />
-      </p>
       <div v-if="media_kind_resolved === 'podcast'" class="buttons">
         <a
           class="button is-small"
@@ -23,50 +23,58 @@
           v-text="$t('dialog.album.remove-podcast')"
         />
       </div>
-      <div class="content is-small">
-        <p v-if="item.artist">
-          <span class="heading" v-text="$t('dialog.album.artist')" />
-          <a
-            class="title is-6 has-text-link"
-            @click="open_artist"
-            v-text="item.artist"
-          />
-        </p>
-        <p v-if="item.date_released">
-          <span class="heading" v-text="$t('dialog.album.release-date')" />
-          <span class="title is-6" v-text="$filters.date(item.date_released)" />
-        </p>
-        <p v-else-if="item.year">
-          <span class="heading" v-text="$t('dialog.album.year')" />
-          <span class="title is-6" v-text="item.year" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.album.tracks')" />
-          <span class="title is-6" v-text="item.track_count" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.album.duration')" />
-          <span
-            class="title is-6"
-            v-text="$filters.durationInHours(item.length_ms)"
-          />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.album.type')" />
-          <span
-            class="title is-6"
-            v-text="
-              `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
-            "
-          />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.album.added-on')" />
-          <span
-            class="title is-6"
-            v-text="$filters.datetime(item.time_added)"
-          />
-        </p>
+      <div v-if="item.artist" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.album.artist')"
+        />
+        <div class="title is-6">
+          <a @click="open_artist" v-text="item.artist" />
+        </div>
+      </div>
+      <div v-if="item.date_released" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.album.release-date')"
+        />
+        <div class="title is-6" v-text="$filters.date(item.date_released)" />
+      </div>
+      <div v-else-if="item.year" class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.album.year')" />
+        <div class="title is-6" v-text="item.year" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.album.tracks')"
+        />
+        <div class="title is-6" v-text="item.track_count" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.album.duration')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.durationInHours(item.length_ms)"
+        />
+      </div>
+      <div class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.album.type')" />
+        <div
+          class="title is-6"
+          v-text="
+            `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
+          "
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.album.added-on')"
+        />
+        <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
       </div>
     </template>
     <template #footer>
diff --git a/web-src/src/components/ModalDialogAlbumSpotify.vue b/web-src/src/components/ModalDialogAlbumSpotify.vue
index 1ec177f2..b479dfdb 100644
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@@ -1,40 +1,39 @@
 <template>
   <base-modal :show="show" @close="$emit('close')">
     <template #content>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
+      </div>
       <cover-artwork
         :url="artwork_url(item)"
         :artist="item.artist"
         :album="item.name"
-        class="fd-has-shadow fd-cover fd-cover-normal-image"
+        class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
         @load="artwork_loaded"
         @error="artwork_error"
       />
-      <p class="title is-4">
-        <a class="has-text-link" @click="open" v-text="item.name" />
-      </p>
-      <div class="content is-small">
-        <p>
-          <span
-            class="heading"
-            v-text="$t('dialog.spotify.album.album-artist')"
-          />
-          <a
-            class="title is-6 has-text-link"
-            @click="open_artist"
-            v-text="item.artists[0].name"
-          />
-        </p>
-        <p>
-          <span
-            class="heading"
-            v-text="$t('dialog.spotify.album.release-date')"
-          />
-          <span class="title is-6" v-text="$filters.date(item.release_date)" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.spotify.album.type')" />
-          <span class="title is-6" v-text="item.album_type" />
-        </p>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.album.album-artist')"
+        />
+        <div class="title is-6">
+          <a @click="open_artist" v-text="item.artists[0].name" />
+        </div>
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.album.release-date')"
+        />
+        <div class="title is-6" v-text="$filters.date(item.release_date)" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.album.type')"
+        />
+        <div class="title is-6" v-text="item.album_type" />
       </div>
     </template>
     <template #footer>
diff --git a/web-src/src/components/ModalDialogArtist.vue b/web-src/src/components/ModalDialogArtist.vue
index ebd5ad4a..847550d5 100644
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@@ -1,29 +1,33 @@
 <template>
   <base-modal :show="show" @close="$emit('close')">
     <template #content>
-      <p class="title is-4">
-        <a class="has-text-link" @click="open" v-text="item.name" />
-      </p>
-      <div class="content is-small">
-        <p>
-          <span class="heading" v-text="$t('dialog.artist.albums')" />
-          <span class="title is-6" v-text="item.album_count" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.artist.tracks')" />
-          <span class="title is-6" v-text="item.track_count" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.artist.type')" />
-          <span class="title is-6" v-text="$t(`data.kind.${item.data_kind}`)" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.artist.added-on')" />
-          <span
-            class="title is-6"
-            v-text="$filters.datetime(item.time_added)"
-          />
-        </p>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.artist.albums')"
+        />
+        <div class="title is-6" v-text="item.album_count" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.artist.tracks')"
+        />
+        <div class="title is-6" v-text="item.track_count" />
+      </div>
+      <div class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.artist.type')" />
+        <div class="title is-6" v-text="$t(`data.kind.${item.data_kind}`)" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.artist.added-on')"
+        />
+        <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
       </div>
     </template>
     <template #footer>
diff --git a/web-src/src/components/ModalDialogArtistSpotify.vue b/web-src/src/components/ModalDialogArtistSpotify.vue
index 9d81d19e..56a2df72 100644
--- a/web-src/src/components/ModalDialogArtistSpotify.vue
+++ b/web-src/src/components/ModalDialogArtistSpotify.vue
@@ -1,24 +1,25 @@
 <template>
   <base-modal :show="show" @close="$emit('close')">
     <template #content>
-      <p class="title is-4">
-        <a class="has-text-link" @click="open" v-text="item.name" />
-      </p>
-      <div class="content is-small">
-        <p>
-          <span
-            class="heading"
-            v-text="$t('dialog.spotify.artist.popularity')"
-          />
-          <span
-            class="title is-6"
-            v-text="[item.popularity, item.followers.total].join(' / ')"
-          />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.spotify.artist.genres')" />
-          <span class="title is-6" v-text="item.genres.join(', ')" />
-        </p>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.artist.popularity')"
+        />
+        <div
+          class="title is-6"
+          v-text="[item.popularity, item.followers.total].join(' / ')"
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.artist.genres')"
+        />
+        <div class="title is-6" v-text="item.genres.join(', ')" />
       </div>
     </template>
     <template #footer>
diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue
index bf5c2097..cf507ba2 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -1,32 +1,37 @@
 <template>
   <base-modal :show="show" @close="$emit('close')">
     <template #content>
-      <p class="title is-4">
-        <a class="has-text-link" @click="open_albums" v-text="item.name" />
-      </p>
-      <p>
-        <span class="heading" v-text="$t('dialog.composer.albums')" />
-        <a
-          class="has-text-link is-6"
-          @click="open_albums"
-          v-text="item.album_count"
+      <div class="title is-4">
+        <a @click="open_albums" v-text="item.name" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.composer.albums')"
         />
-      </p>
-      <p>
-        <span class="heading" v-text="$t('dialog.composer.tracks')" />
-        <a
-          class="has-text-link is-6"
-          @click="open_tracks"
-          v-text="item.track_count"
+        <div class="title is-6">
+          <a @click="open_albums" v-text="item.album_count" />
+        </div>
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.composer.tracks')"
         />
-      </p>
-      <p>
-        <span class="heading" v-text="$t('dialog.composer.duration')" />
-        <span
+        <div class="title is-6">
+          <a @click="open_tracks" v-text="item.track_count" />
+        </div>
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.composer.duration')"
+        />
+        <div
           class="title is-6"
           v-text="$filters.durationInHours(item.length_ms)"
         />
-      </p>
+      </div>
     </template>
     <template #footer>
       <a class="card-footer-item has-text-dark" @click="queue_add">
diff --git a/web-src/src/components/ModalDialogGenre.vue b/web-src/src/components/ModalDialogGenre.vue
index 0d56600a..ad2f88b9 100644
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -1,25 +1,32 @@
 <template>
   <base-modal :show="show" @close="$emit('close')">
     <template #content>
-      <p class="title is-4">
-        <a class="has-text-link" @click="open" v-text="item.name" />
-      </p>
-      <div class="content is-small">
-        <p>
-          <span class="heading" v-text="$t('dialog.genre.albums')" />
-          <span class="title is-6" v-text="item.album_count" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.genre.tracks')" />
-          <span class="title is-6" v-text="item.track_count" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.genre.duration')" />
-          <span
-            class="title is-6"
-            v-text="$filters.durationInHours(item.length_ms)"
-          />
-        </p>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.genre.albums')"
+        />
+        <div class="title is-6" v-text="item.album_count" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.genre.tracks')"
+        />
+        <div class="title is-6" v-text="item.track_count" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.genre.duration')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.durationInHours(item.length_ms)"
+        />
       </div>
     </template>
     <template #footer>
diff --git a/web-src/src/components/ModalDialogPlaylist.vue b/web-src/src/components/ModalDialogPlaylist.vue
index 34046d0a..4b2fdd16 100644
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -1,22 +1,29 @@
 <template>
   <base-modal :show="show" @close="$emit('close')">
     <template #content>
-      <p class="title is-4">
-        <a class="has-text-link" @click="open" v-text="item.name" />
-      </p>
-      <div class="content is-small">
-        <p>
-          <span class="heading" v-text="$t('dialog.playlist.path')" />
-          <span class="title is-6" v-text="item.path" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.playlist.type')" />
-          <span class="title is-6" v-text="$t(`playlist.type.${item.type}`)" />
-        </p>
-        <p v-if="!item.folder">
-          <span class="heading" v-text="$t('dialog.playlist.tracks')" />
-          <span class="title is-6" v-text="item.item_count" />
-        </p>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.playlist.path')"
+        />
+        <div class="title is-6" v-text="item.path" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.playlist.type')"
+        />
+        <div class="title is-6" v-text="$t(`playlist.type.${item.type}`)" />
+      </div>
+      <div v-if="!item.folder" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.playlist.tracks')"
+        />
+        <div class="title is-6" v-text="item.item_count" />
       </div>
     </template>
     <template v-if="!item.folder" #footer>
diff --git a/web-src/src/components/ModalDialogPlaylistSpotify.vue b/web-src/src/components/ModalDialogPlaylistSpotify.vue
index 78a58f57..6b7f2b73 100644
--- a/web-src/src/components/ModalDialogPlaylistSpotify.vue
+++ b/web-src/src/components/ModalDialogPlaylistSpotify.vue
@@ -1,22 +1,29 @@
 <template>
   <base-modal :show="show" @close="$emit('close')">
     <template #content>
-      <p class="title is-4">
-        <a class="has-text-link" @click="open" v-text="item.name" />
-      </p>
-      <div class="content is-small">
-        <p>
-          <span class="heading" v-text="$t('dialog.spotify.playlist.owner')" />
-          <span class="title is-6" v-text="item.owner.display_name" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.spotify.playlist.tracks')" />
-          <span class="title is-6" v-text="item.tracks.total" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.spotify.playlist.path')" />
-          <span class="title is-6" v-text="item.uri" />
-        </p>
+      <div class="title is-4">
+        <a @click="open" v-text="item.name" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.playlist.owner')"
+        />
+        <div class="title is-6" v-text="item.owner.display_name" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.playlist.tracks')"
+        />
+        <div class="title is-6" v-text="item.tracks.total" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.playlist.path')"
+        />
+        <div class="title is-6" v-text="item.uri" />
       </div>
     </template>
     <template #footer>
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index 21b626c9..1c7e4fd4 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -1,95 +1,117 @@
 <template>
   <base-modal :show="show" @close="$emit('close')">
     <template #content>
-      <p class="title is-4" v-text="item.title" />
-      <p class="subtitle" v-text="item.artist" />
-      <div class="content is-small">
-        <p v-if="item.album">
-          <span class="heading" v-text="$t('dialog.queue-item.album')" />
-          <a
-            class="title is-6 has-text-link"
-            @click="open_album"
-            v-text="item.album"
-          />
-        </p>
-        <p v-if="item.album_artist">
-          <span class="heading" v-text="$t('dialog.queue-item.album-artist')" />
-          <a
-            class="title is-6 has-text-link"
-            @click="open_album_artist"
-            v-text="item.album_artist"
-          />
-        </p>
-        <p v-if="item.composer">
-          <span class="heading" v-text="$t('dialog.queue-item.composer')" />
-          <span class="title is-6" v-text="item.composer" />
-        </p>
-        <p v-if="item.year">
-          <span class="heading" v-text="$t('dialog.queue-item.year')" />
-          <span class="title is-6" v-text="item.year" />
-        </p>
-        <p v-if="item.genre">
-          <span class="heading" v-text="$t('dialog.queue-item.genre')" />
-          <a
-            class="title is-6 has-text-link"
-            @click="open_genre"
-            v-text="item.genre"
-          />
-        </p>
-        <p v-if="item.disc_number">
-          <span class="heading" v-text="$t('dialog.queue-item.position')" />
+      <div class="title is-4" v-text="item.title" />
+      <div class="subtitle" v-text="item.artist" />
+      <div v-if="item.album" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.album')"
+        />
+        <div class="title is-6">
+          <a @click="open_album" v-text="item.album" />
+        </div>
+      </div>
+      <div v-if="item.album_artist" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.album-artist')"
+        />
+        <div class="title is-6">
+          <a @click="open_album_artist" v-text="item.album_artist" />
+        </div>
+      </div>
+      <div v-if="item.composer" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.composer')"
+        />
+        <div class="title is-6" v-text="item.composer" />
+      </div>
+      <div v-if="item.year" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.year')"
+        />
+        <div class="title is-6" v-text="item.year" />
+      </div>
+      <div v-if="item.genre" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.genre')"
+        />
+        <div class="title is-6">
+          <a @click="open_genre" v-text="item.genre" />
+        </div>
+      </div>
+      <div v-if="item.disc_number" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.position')"
+        />
+        <div
+          class="title is-6"
+          v-text="[item.disc_number, item.track_number].join(' / ')"
+        />
+      </div>
+      <div v-if="item.length_ms" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.duration')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.durationInHours(item.length_ms)"
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.path')"
+        />
+        <div class="title is-6" v-text="item.path" />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.type')"
+        />
+        <div class="title is-6">
           <span
-            class="title is-6"
-            v-text="[item.disc_number, item.track_number].join(' / ')"
+            v-text="
+              `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
+            "
           />
-        </p>
-        <p v-if="item.length_ms">
-          <span class="heading" v-text="$t('dialog.queue-item.duration')" />
+        </div>
+      </div>
+      <div v-if="item.samplerate" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.queue-item.quality')"
+        />
+        <div class="title is-6">
+          <span v-text="item.type" />
           <span
-            class="title is-6"
-            v-text="$filters.durationInHours(item.length_ms)"
+            v-if="item.samplerate"
+            v-text="
+              $t('dialog.queue-item.samplerate', {
+                rate: item.samplerate
+              })
+            "
           />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.queue-item.path')" />
-          <span class="title is-6" v-text="item.path" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.queue-item.type')" />
-          <span class="title is-6">
-            <span
-              v-text="
-                `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
-              "
-            />
-          </span>
-        </p>
-        <p v-if="item.samplerate">
-          <span class="heading" v-text="$t('dialog.queue-item.quality')" />
-          <span class="title is-6">
-            <span v-text="item.type" />
-            <span
-              v-if="item.samplerate"
-              v-text="
-                $t('dialog.queue-item.samplerate', {
-                  rate: item.samplerate
-                })
-              "
-            />
-            <span
-              v-if="item.channels"
-              v-text="
-                $t('dialog.queue-item.channels', {
-                  channels: $filters.channels(item.channels)
-                })
-              "
-            />
-            <span
-              v-if="item.bitrate"
-              v-text="$t('dialog.queue-item.bitrate', { rate: item.bitrate })"
-            />
-          </span>
-        </p>
+          <span
+            v-if="item.channels"
+            v-text="
+              $t('dialog.queue-item.channels', {
+                channels: $filters.channels(item.channels)
+              })
+            "
+          />
+          <span
+            v-if="item.bitrate"
+            v-text="$t('dialog.queue-item.bitrate', { rate: item.bitrate })"
+          />
+        </div>
       </div>
     </template>
     <template #footer>
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index 1a4969cf..79c05636 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -17,118 +17,137 @@
           v-text="$t('dialog.track.mark-as-played')"
         />
       </div>
-      <div class="content is-small">
-        <p v-if="item.album">
-          <span class="heading" v-text="$t('dialog.track.album')" />
-          <a
-            class="title is-6 has-text-link"
-            @click="open_album"
-            v-text="item.album"
-          />
-        </p>
-        <p v-if="item.album_artist && item.media_kind !== 'audiobook'">
-          <span class="heading" v-text="$t('dialog.track.album-artist')" />
-          <a
-            class="title is-6 has-text-link"
-            @click="open_album_artist"
-            v-text="item.album_artist"
-          />
-        </p>
-        <p v-if="item.composer">
-          <span class="heading" v-text="$t('dialog.track.composer')" />
-          <span class="title is-6" v-text="item.composer" />
-        </p>
-        <p v-if="item.date_released">
-          <span class="heading" v-text="$t('dialog.track.release-date')" />
-          <span class="title is-6" v-text="$filters.date(item.date_released)" />
-        </p>
-        <p v-else-if="item.year">
-          <span class="heading" v-text="$t('dialog.track.year')" />
-          <span class="title is-6" v-text="item.year" />
-        </p>
-        <p v-if="item.genre">
-          <span class="heading" v-text="$t('dialog.track.genre')" />
-          <a
-            class="title is-6 has-text-link"
-            @click="open_genre"
-            v-text="item.genre"
-          />
-        </p>
-        <p v-if="item.disc_number">
-          <span class="heading" v-text="$t('dialog.track.position')" />
+      <div v-if="item.album" class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.track.album')" />
+        <div class="title is-6">
+          <a @click="open_album" v-text="item.album" />
+        </div>
+      </div>
+      <div
+        v-if="item.album_artist && item.media_kind !== 'audiobook'"
+        class="mb-3"
+      >
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.album-artist')"
+        />
+        <div class="title is-6">
+          <a @click="open_album_artist" v-text="item.album_artist" />
+        </div>
+      </div>
+      <div v-if="item.composer" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.composer')"
+        />
+        <div class="title is-6" v-text="item.composer" />
+      </div>
+      <div v-if="item.date_released" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.release-date')"
+        />
+        <div class="title is-6" v-text="$filters.date(item.date_released)" />
+      </div>
+      <div v-else-if="item.year" class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.track.year')" />
+        <div class="title is-6" v-text="item.year" />
+      </div>
+      <div v-if="item.genre" class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.track.genre')" />
+        <div class="title is-6">
+          <a @click="open_genre" v-text="item.genre" />
+        </div>
+      </div>
+      <div v-if="item.disc_number" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.position')"
+        />
+        <div
+          class="title is-6"
+          v-text="[item.disc_number, item.track_number].join(' / ')"
+        />
+      </div>
+      <div v-if="item.length_ms" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.duration')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.durationInHours(item.length_ms)"
+        />
+      </div>
+      <div class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.track.path')" />
+        <div class="title is-6" v-text="item.path" />
+      </div>
+      <div class="mb-3">
+        <div class="is-size-7 is-uppercase" v-text="$t('dialog.track.type')" />
+        <div
+          class="title is-6"
+          v-text="
+            `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
+          "
+        />
+      </div>
+      <div v-if="item.samplerate" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.quality')"
+        />
+        <div class="title is-6">
+          <span v-text="item.type" />
           <span
-            class="title is-6"
-            v-text="[item.disc_number, item.track_number].join(' / ')"
-          />
-        </p>
-        <p v-if="item.length_ms">
-          <span class="heading" v-text="$t('dialog.track.duration')" />
-          <span
-            class="title is-6"
-            v-text="$filters.durationInHours(item.length_ms)"
-          />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.track.path')" />
-          <span class="title is-6" v-text="item.path" />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.track.type')" />
-          <span
-            class="title is-6"
+            v-if="item.samplerate"
             v-text="
-              `${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
-            "
-          />
-        </p>
-        <p v-if="item.samplerate">
-          <span class="heading" v-text="$t('dialog.track.quality')" />
-          <span class="title is-6">
-            <span v-text="item.type" />
-            <span
-              v-if="item.samplerate"
-              v-text="
-                $t('dialog.track.samplerate', {
-                  rate: item.samplerate
-                })
-              "
-            />
-            <span
-              v-if="item.channels"
-              v-text="
-                $t('dialog.track.channels', {
-                  channels: $filters.channels(item.channels)
-                })
-              "
-            />
-            <span
-              v-if="item.bitrate"
-              v-text="$t('dialog.track.bitrate', { rate: item.bitrate })"
-            />
-          </span>
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.track.added-on')" />
-          <span
-            class="title is-6"
-            v-text="$filters.datetime(item.time_added)"
-          />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.track.rating')" />
-          <span
-            class="title is-6"
-            v-text="
-              $t('dialog.track.rating-value', {
-                rating: Math.floor(item.rating / 10)
+              $t('dialog.track.samplerate', {
+                rate: item.samplerate
               })
             "
           />
-        </p>
-        <p v-if="item.comment">
-          <span class="heading" v-text="$t('dialog.track.comment')" />
-          <span class="title is-6" v-text="item.comment" />
-        </p>
+          <span
+            v-if="item.channels"
+            v-text="
+              $t('dialog.track.channels', {
+                channels: $filters.channels(item.channels)
+              })
+            "
+          />
+          <span
+            v-if="item.bitrate"
+            v-text="$t('dialog.track.bitrate', { rate: item.bitrate })"
+          />
+        </div>
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.added-on')"
+        />
+        <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
+      </div>
+      <div>
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.rating')"
+        />
+        <div
+          class="title is-6"
+          v-text="
+            $t('dialog.track.rating-value', {
+              rating: Math.floor(item.rating / 10)
+            })
+          "
+        />
+      </div>
+      <div v-if="item.comment" class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.track.comment')"
+        />
+        <div class="title is-6" v-text="item.comment" />
       </div>
     </template>
     <template #footer>
diff --git a/web-src/src/components/ModalDialogTrackSpotify.vue b/web-src/src/components/ModalDialogTrackSpotify.vue
index 9239797e..77892bb9 100644
--- a/web-src/src/components/ModalDialogTrackSpotify.vue
+++ b/web-src/src/components/ModalDialogTrackSpotify.vue
@@ -3,54 +3,60 @@
     <template #content>
       <p class="title is-4" v-text="item.name" />
       <p class="subtitle" v-text="item.artists[0].name" />
-      <div class="content is-small">
-        <p>
-          <span class="heading" v-text="$t('dialog.spotify.track.album')" />
-          <a
-            class="title is-6 has-text-link"
-            @click="open_album"
-            v-text="item.album.name"
-          />
-        </p>
-        <p>
-          <span
-            class="heading"
-            v-text="$t('dialog.spotify.track.album-artist')"
-          />
-          <a
-            class="title is-6 has-text-link"
-            @click="open_artist"
-            v-text="item.artists[0].name"
-          />
-        </p>
-        <p>
-          <span
-            class="heading"
-            v-text="$t('dialog.spotify.track.release-date')"
-          />
-          <span
-            class="title is-6"
-            v-text="$filters.date(item.album.release_date)"
-          />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.spotify.track.position')" />
-          <span
-            class="title is-6"
-            v-text="[item.disc_number, item.track_number].join(' / ')"
-          />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.spotify.track.duration')" />
-          <span
-            class="title is-6"
-            v-text="$filters.durationInHours(item.duration_ms)"
-          />
-        </p>
-        <p>
-          <span class="heading" v-text="$t('dialog.spotify.track.path')" />
-          <span class="title is-6" v-text="item.uri" />
-        </p>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.album')"
+        />
+        <div class="title is-6">
+          <a @click="open_album" v-text="item.album.name" />
+        </div>
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.album-artist')"
+        />
+        <div class="title is-6">
+          <a @click="open_artist" v-text="item.artists[0].name" />
+        </div>
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.release-date')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.date(item.album.release_date)"
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.position')"
+        />
+        <div
+          class="title is-6"
+          v-text="[item.disc_number, item.track_number].join(' / ')"
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.duration')"
+        />
+        <div
+          class="title is-6"
+          v-text="$filters.durationInHours(item.duration_ms)"
+        />
+      </div>
+      <div class="mb-3">
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('dialog.spotify.track.path')"
+        />
+        <div class="title is-6" v-text="item.uri" />
       </div>
     </template>
     <template #footer>
diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index f72bfea9..12bf2bf7 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -105,14 +105,6 @@
   }
 }
 
-.heading {
-  display: block;
-  font-size: 0.75rem;
-  letter-spacing: 1px;
-  margin-bottom: 0px !important;
-  text-transform: uppercase;
-}
-
 .column {
   &.fd-has-cover {
     @include mixins.mobile {
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index 66ec27a5..b9d45cab 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>
-        <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" />
-        </p>
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
+          <a @click="open_artist" v-text="album.artist" />
+        </div>
         <div class="buttons is-centered-mobile mt-5">
           <a
             class="button has-background-light is-small is-rounded"
@@ -32,8 +32,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile my-5"
           v-text="$t('page.album.track-count', { count: album.track_count })"
         />
         <list-tracks :items="tracks" :uris="album.uri" />
diff --git a/web-src/src/pages/PageAlbumSpotify.vue b/web-src/src/pages/PageAlbumSpotify.vue
index aa94d4a3..4702b2fb 100644
--- a/web-src/src/pages/PageAlbumSpotify.vue
+++ b/web-src/src/pages/PageAlbumSpotify.vue
@@ -2,14 +2,10 @@
   <div>
     <content-with-hero>
       <template #heading-left>
-        <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"
-          />
-        </p>
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
+          <a @click="open_artist" v-text="album.artists[0].name" />
+        </div>
         <div class="buttons is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="shuffle" size="16" />
@@ -33,8 +29,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile mt-5"
           v-text="
             $t('page.spotify.album.track-count', { count: album.tracks.total })
           "
diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index e996ef26..035ec713 100644
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -6,7 +6,10 @@
         <index-button-list :indices="albums.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.albums.filter')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.albums.filter')"
+            />
             <control-switch v-model="uiStore.hide_singles">
               <template #label>
                 <span v-text="$t('page.albums.hide-singles')" />
@@ -28,7 +31,10 @@
             </control-switch>
           </div>
           <div class="column">
-            <p class="heading" v-text="$t('page.albums.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.albums.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.albums_sort"
               :options="groupings"
@@ -37,9 +43,9 @@
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.albums.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.albums.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.albums.count', { count: albums.count })"
         />
       </template>
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index dd8c58ec..a50eb0ff 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -4,7 +4,10 @@
       <template #options>
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.artist.filter')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.filter')"
+            />
             <control-switch
               v-if="spotify_enabled"
               v-model="uiStore.hide_spotify"
@@ -18,7 +21,10 @@
             </control-switch>
           </div>
           <div class="column">
-            <p class="heading" v-text="$t('page.artist.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.artist_albums_sort"
               :options="groupings"
@@ -27,7 +33,17 @@
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="artist.name" />
+        <div class="title is-4" v-text="artist.name" />
+        <div class="is-size-7 is-uppercase">
+          <span
+            v-text="$t('page.artist.album-count', { count: albums.count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <a
+            @click="open_tracks"
+            v-text="$t('page.artist.track-count', { count: track_count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -44,17 +60,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <span
-            v-text="$t('page.artist.album-count', { count: albums.count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <a
-            class="has-text-link"
-            @click="open_tracks"
-            v-text="$t('page.artist.track-count', { count: track_count })"
-          />
-        </p>
         <list-albums :items="albums" />
         <modal-dialog-artist
           :item="artist"
diff --git a/web-src/src/pages/PageArtistSpotify.vue b/web-src/src/pages/PageArtistSpotify.vue
index e3fb0f0b..412784a7 100644
--- a/web-src/src/pages/PageArtistSpotify.vue
+++ b/web-src/src/pages/PageArtistSpotify.vue
@@ -2,7 +2,11 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="artist.name" />
+        <div class="title is-4" v-text="artist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('page.spotify.artist.album-count', { count: total })"
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,10 +23,6 @@
         </div>
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile"
-          v-text="$t('page.spotify.artist.album-count', { count: total })"
-        />
         <list-albums-spotify :items="albums" />
         <VueEternalLoading v-if="offset < total" :load="load_next">
           <template #loading>
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index 9953f95d..dcb00701 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -5,7 +5,10 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.artist.filter')" />
+            <p
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.filter')"
+            />
             <control-switch
               v-if="spotify_enabled"
               v-model="uiStore.hide_spotify"
@@ -19,7 +22,10 @@
             </control-switch>
           </div>
           <div class="column">
-            <p class="heading" v-text="$t('page.artist.sort.title')" />
+            <p
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.artist_tracks_sort"
               :options="groupings"
@@ -29,6 +35,16 @@
       </template>
       <template #heading-left>
         <p class="title is-4" v-text="artist.name" />
+        <div class="is-size-7 is-uppercase">
+          <a
+            @click="open_artist"
+            v-text="$t('page.artist.album-count', { count: album_count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <span
+            v-text="$t('page.artist.track-count', { count: tracks.count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -45,17 +61,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <a
-            class="has-text-link"
-            @click="open_artist"
-            v-text="$t('page.artist.album-count', { count: album_count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <span
-            v-text="$t('page.artist.track-count', { count: tracks.count })"
-          />
-        </p>
         <list-tracks :items="tracks" :uris="track_uris" />
         <modal-dialog-artist
           :item="artist"
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index b1e7e645..8fbb644b 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -6,7 +6,10 @@
         <index-button-list :indices="artists.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.artists.filter')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artists.filter')"
+            />
             <control-switch v-model="uiStore.hide_singles">
               <template #label>
                 <span v-text="$t('page.artists.hide-singles')" />
@@ -27,7 +30,10 @@
             </div>
           </div>
           <div class="column">
-            <p class="heading" v-text="$t('page.artists.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artists.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.artists_sort"
               :options="groupings"
@@ -36,9 +42,9 @@
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.artists.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.artists.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.artists.count', { count: artists.count })"
         />
       </template>
diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue
index 6a70ff05..be9e3398 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>
-        <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" />
-        </p>
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
+          <a @click="open_artist" v-text="album.artist" />
+        </div>
         <div class="buttons is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="play" size="16" />
@@ -29,8 +29,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile mt-5"
           v-text="
             $t('page.audiobooks.album.track-count', {
               count: album.track_count
diff --git a/web-src/src/pages/PageAudiobooksAlbums.vue b/web-src/src/pages/PageAudiobooksAlbums.vue
index 56033054..21babef6 100644
--- a/web-src/src/pages/PageAudiobooksAlbums.vue
+++ b/web-src/src/pages/PageAudiobooksAlbums.vue
@@ -8,7 +8,7 @@
       <template #heading-left>
         <p class="title is-4" v-text="$t('page.audiobooks.albums.title')" />
         <p
-          class="heading"
+          class="is-size-7 is-uppercase"
           v-text="$t('page.audiobooks.albums.count', { count: albums.count })"
         />
       </template>
diff --git a/web-src/src/pages/PageAudiobooksArtist.vue b/web-src/src/pages/PageAudiobooksArtist.vue
index 3ce11697..42171edd 100644
--- a/web-src/src/pages/PageAudiobooksArtist.vue
+++ b/web-src/src/pages/PageAudiobooksArtist.vue
@@ -2,7 +2,15 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="artist.name" />
+        <div class="title is-4" v-text="artist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="
+            $t('page.audiobooks.artist.album-count', {
+              count: artist.album_count
+            })
+          "
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,14 +27,6 @@
         </div>
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile"
-          v-text="
-            $t('page.audiobooks.artist.album-count', {
-              count: artist.album_count
-            })
-          "
-        />
         <list-albums :items="albums" />
         <modal-dialog-artist
           :item="artist"
diff --git a/web-src/src/pages/PageAudiobooksArtists.vue b/web-src/src/pages/PageAudiobooksArtists.vue
index 26122c21..175554c2 100644
--- a/web-src/src/pages/PageAudiobooksArtists.vue
+++ b/web-src/src/pages/PageAudiobooksArtists.vue
@@ -6,9 +6,9 @@
         <index-button-list :indices="artists.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.audiobooks.artists.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.audiobooks.artists.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.audiobooks.artists.count', { count: artists.count })"
         />
       </template>
diff --git a/web-src/src/pages/PageAudiobooksGenres.vue b/web-src/src/pages/PageAudiobooksGenres.vue
index 229c2c22..b4198776 100644
--- a/web-src/src/pages/PageAudiobooksGenres.vue
+++ b/web-src/src/pages/PageAudiobooksGenres.vue
@@ -6,9 +6,9 @@
         <index-button-list :indices="genres.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.genres.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.genres.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.genres.count', { count: genres.total })"
         />
       </template>
diff --git a/web-src/src/pages/PageComposerAlbums.vue b/web-src/src/pages/PageComposerAlbums.vue
index d2308a0a..9f132b7a 100644
--- a/web-src/src/pages/PageComposerAlbums.vue
+++ b/web-src/src/pages/PageComposerAlbums.vue
@@ -2,7 +2,21 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="composer.name" />
+        <div class="title is-4" v-text="composer.name" />
+        <div class="is-size-7 is-uppercase">
+          <span
+            v-text="
+              $t('page.composer.album-count', { count: composer.album_count })
+            "
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <a
+            @click="open_tracks"
+            v-text="
+              $t('page.composer.track-count', { count: composer.track_count })
+            "
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,21 +33,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <span
-            v-text="
-              $t('page.composer.album-count', { count: composer.album_count })
-            "
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <a
-            class="has-text-link"
-            @click="open_tracks"
-            v-text="
-              $t('page.composer.track-count', { count: composer.track_count })
-            "
-          />
-        </p>
         <list-albums :items="albums" />
         <modal-dialog-composer
           :item="composer"
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index 383e4d80..34fb15f3 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -5,7 +5,10 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.artist.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.artist.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.composer_tracks_sort"
               :options="groupings"
@@ -14,7 +17,23 @@
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="composer.name" />
+        <div class="title is-4" v-text="composer.name" />
+        <div class="is-size-7 is-uppercase">
+          <a
+            @click="open_albums"
+            v-text="
+              $t('page.composer.album-count', {
+                count: composer.album_count
+              })
+            "
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <span
+            v-text="
+              $t('page.composer.track-count', { count: composer.track_count })
+            "
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -31,23 +50,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <a
-            class="has-text-link"
-            @click="open_albums"
-            v-text="
-              $t('page.composer.album-count', {
-                count: composer.album_count
-              })
-            "
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <span
-            v-text="
-              $t('page.composer.track-count', { count: composer.track_count })
-            "
-          />
-        </p>
         <list-tracks :items="tracks" :expression="expression" />
         <modal-dialog-composer
           :item="composer"
diff --git a/web-src/src/pages/PageComposers.vue b/web-src/src/pages/PageComposers.vue
index b8c2386b..fd74319c 100644
--- a/web-src/src/pages/PageComposers.vue
+++ b/web-src/src/pages/PageComposers.vue
@@ -6,9 +6,9 @@
         <index-button-list :indices="composers.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.composers.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.composers.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.composers.count', { count: composers.total })"
         />
       </template>
diff --git a/web-src/src/pages/PageGenreAlbums.vue b/web-src/src/pages/PageGenreAlbums.vue
index fec5068f..5ceab0ef 100644
--- a/web-src/src/pages/PageGenreAlbums.vue
+++ b/web-src/src/pages/PageGenreAlbums.vue
@@ -5,7 +5,17 @@
         <index-button-list :indices="albums.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="genre.name" />
+        <div class="title is-4" v-text="genre.name" />
+        <div class="is-size-7 is-uppercase">
+          <span
+            v-text="$t('page.genre.album-count', { count: genre.album_count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <a
+            @click="open_tracks"
+            v-text="$t('page.genre.track-count', { count: genre.track_count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -22,17 +32,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <span
-            v-text="$t('page.genre.album-count', { count: genre.album_count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <a
-            class="has-text-link"
-            @click="open_tracks"
-            v-text="$t('page.genre.track-count', { count: genre.track_count })"
-          />
-        </p>
         <list-albums :items="albums" />
         <modal-dialog-genre
           :item="genre"
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index 7e6d6584..2c2857a7 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -5,7 +5,10 @@
         <index-button-list :indices="tracks.indices" />
         <div class="columns">
           <div class="column">
-            <p class="heading" v-text="$t('page.genre.sort.title')" />
+            <div
+              class="is-size-7 is-uppercase"
+              v-text="$t('page.genre.sort.title')"
+            />
             <control-dropdown
               v-model:value="uiStore.genre_tracks_sort"
               :options="groupings"
@@ -14,7 +17,17 @@
         </div>
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="genre.name" />
+        <div class="title is-4" v-text="genre.name" />
+        <div class="is-size-7 is-uppercase">
+          <a
+            @click="open_genre"
+            v-text="$t('page.genre.album-count', { count: genre.album_count })"
+          />
+          <span>&nbsp;|&nbsp;</span>
+          <span
+            v-text="$t('page.genre.track-count', { count: genre.track_count })"
+          />
+        </div>
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -31,17 +44,6 @@
         </div>
       </template>
       <template #content>
-        <p class="heading has-text-centered-mobile">
-          <a
-            class="has-text-link"
-            @click="open_genre"
-            v-text="$t('page.genre.album-count', { count: genre.album_count })"
-          />
-          <span>&nbsp;|&nbsp;</span>
-          <span
-            v-text="$t('page.genre.track-count', { count: genre.track_count })"
-          />
-        </p>
         <list-tracks :items="tracks" :expression="expression" />
         <modal-dialog-genre
           :item="genre"
diff --git a/web-src/src/pages/PageGenres.vue b/web-src/src/pages/PageGenres.vue
index ae10a8d9..7bf8d0f6 100644
--- a/web-src/src/pages/PageGenres.vue
+++ b/web-src/src/pages/PageGenres.vue
@@ -6,9 +6,9 @@
         <index-button-list :indices="genres.indices" />
       </template>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.genres.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.genres.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.genres.count', { count: genres.total })"
         />
       </template>
diff --git a/web-src/src/pages/PagePlaylistFolder.vue b/web-src/src/pages/PagePlaylistFolder.vue
index 334f83f5..f61f4ba4 100644
--- a/web-src/src/pages/PagePlaylistFolder.vue
+++ b/web-src/src/pages/PagePlaylistFolder.vue
@@ -2,14 +2,14 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p
+        <div
           class="title is-4"
           v-text="
             playlist.id === 0 ? $t('page.playlists.title') : playlist.name
           "
         />
-        <p
-          class="heading"
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.playlists.count', { count: playlists.count })"
         />
       </template>
diff --git a/web-src/src/pages/PagePlaylistTracks.vue b/web-src/src/pages/PagePlaylistTracks.vue
index 23ea31ba..18bc08f9 100644
--- a/web-src/src/pages/PagePlaylistTracks.vue
+++ b/web-src/src/pages/PagePlaylistTracks.vue
@@ -3,6 +3,10 @@
     <content-with-heading>
       <template #heading-left>
         <div class="title is-4" v-text="playlist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="$t('page.playlist.track-count', { count: tracks.count })"
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,10 +23,6 @@
         </div>
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile"
-          v-text="$t('page.playlist.track-count', { count: tracks.count })"
-        />
         <list-tracks :items="tracks" :uris="uris" />
         <modal-dialog-playlist
           :item="playlist"
diff --git a/web-src/src/pages/PagePlaylistTracksSpotify.vue b/web-src/src/pages/PagePlaylistTracksSpotify.vue
index 776d86b8..f22473db 100644
--- a/web-src/src/pages/PagePlaylistTracksSpotify.vue
+++ b/web-src/src/pages/PagePlaylistTracksSpotify.vue
@@ -3,6 +3,12 @@
     <content-with-heading>
       <template #heading-left>
         <div class="title is-4" v-text="playlist.name" />
+        <div
+          class="is-size-7 is-uppercase"
+          v-text="
+            $t('page.spotify.playlist.count', { count: playlist.tracks.total })
+          "
+        />
       </template>
       <template #heading-right>
         <div class="buttons is-centered">
@@ -19,12 +25,6 @@
         </div>
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile"
-          v-text="
-            $t('page.spotify.playlist.count', { count: playlist.tracks.total })
-          "
-        />
         <list-tracks-spotify :items="tracks" :context_uri="playlist.uri" />
         <VueEternalLoading v-if="offset < total" :load="load_next">
           <template #loading>
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index 27903b8e..43e67643 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>
-        <p class="title is-5" v-text="album.name" />
-        <p class="subtitle is-6">
+        <div class="title is-5" v-text="album.name" />
+        <div class="subtitle is-6">
           <br />
-        </p>
+        </div>
         <div class="buttons is-centered-mobile mt-5">
           <a class="button is-small is-dark is-rounded" @click="play">
             <mdicon class="icon" name="play" size="16" />
@@ -29,8 +29,8 @@
         />
       </template>
       <template #content>
-        <p
-          class="heading has-text-centered-mobile mt-5"
+        <div
+          class="is-size-7 is-uppercase has-text-centered-mobile my-5"
           v-text="$t('page.podcast.track-count', { count: album.track_count })"
         />
         <list-tracks
diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue
index 56a3d576..59445faf 100644
--- a/web-src/src/pages/PagePodcasts.vue
+++ b/web-src/src/pages/PagePodcasts.vue
@@ -22,9 +22,9 @@
     </content-with-heading>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.podcasts.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.podcasts.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.podcasts.count', { count: albums.total })"
         />
       </template>
diff --git a/web-src/src/pages/PageQueue.vue b/web-src/src/pages/PageQueue.vue
index ce59a232..6a24092c 100644
--- a/web-src/src/pages/PageQueue.vue
+++ b/web-src/src/pages/PageQueue.vue
@@ -2,9 +2,9 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.queue.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.queue.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.queue.count', { count: queue.count })"
         />
       </template>
diff --git a/web-src/src/pages/PageRadioStreams.vue b/web-src/src/pages/PageRadioStreams.vue
index b9d74c88..5bb02bf5 100644
--- a/web-src/src/pages/PageRadioStreams.vue
+++ b/web-src/src/pages/PageRadioStreams.vue
@@ -2,9 +2,9 @@
   <div>
     <content-with-heading>
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.radio.title')" />
-        <p
-          class="heading"
+        <div class="title is-4" v-text="$t('page.radio.title')" />
+        <div
+          class="is-size-7 is-uppercase"
           v-text="$t('page.radio.count', { count: tracks.total })"
         />
       </template>