Missing atoms

src/components/Feed/Episodes.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div :class="currentEpisode ? 'margin' : ''">
 		<NcLoadingIcon v-if="loading" class="loading" />
 		<ul v-if="!loading">
 			<NcListItem v-for="episode in episodes"
@@ -103,4 +103,8 @@ export default {
 	.loading {
 		margin: 2rem 0;
 	}
+
+	.margin {
+		margin-bottom: 6rem;
+	}
 </style>

src/components/Player/Bar.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-if="player.episode" class="footer">
-		<NcLoadingIcon v-if="!player.loaded" />
+		<NcLoadingIcon v-if="!player.loaded" class="loading" />
 		<ProgressBar v-if="player.loaded" />
 		<div v-if="player.loaded" class="player">
 			<img :src="player.episode.episodeImage">
@@ -63,4 +63,8 @@ export default {
 	.volume {
 		width: 10%;
 	}
+
+	.loading {
+		margin: 2rem 0;
+	}
 </style>

src/components/Sidebar/Subscriptions.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcAppNavigation>
+	<NcAppNavigation :class="currentEpisode ? 'margin' : ''">
 		<NcAppContentList>
 			<router-link to="/">
 				<NcAppNavigationNew :text="t('Add a podcast')">
@@ -45,6 +45,9 @@ export default {
 		}
 	},
 	computed: {
+		currentEpisode() {
+			return this.$store.state.player.episode
+		},
 		subscriptions() {
 			return this.$store.state.subscriptions.subscriptions
 		},
@@ -61,3 +64,9 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+	.margin {
+		margin-bottom: 6rem;
+	}
+</style>