From b54ab2be91fb18c72a1c36aae7e6f48a967d09b3 Mon Sep 17 00:00:00 2001
From: Michel Roux <xefir@crystalyx.net>
Date: Tue, 3 Sep 2024 16:12:11 +0200
Subject: [PATCH] style: :poop: leverage the available space between the
 episode title and the play button (but hacky way) fix #59

---
 src/components/Feed/Episode.vue  | 14 +++++++++++++-
 src/components/Player/Volume.vue | 15 +++++++--------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/Feed/Episode.vue b/src/components/Feed/Episode.vue
index f6852f1..0be5027 100644
--- a/src/components/Feed/Episode.vue
+++ b/src/components/Feed/Episode.vue
@@ -1,6 +1,7 @@
 <template>
 	<NcListItem
 		:active="isCurrentEpisode(episode)"
+		class="episode"
 		:details="!oneLine ? formatLocaleDate(new Date(episode.pubDate?.date)) : ''"
 		:force-display-actions="true"
 		:name="episode.name"
@@ -82,7 +83,7 @@
 				:value="(episode.action.position * 100) / episode.action.total" />
 		</template>
 		<template #subname>
-			<span v-if="!oneLine">{{ episode.duration }}</span>
+			{{ episode.duration }}
 		</template>
 	</NcListItem>
 </template>
@@ -201,3 +202,14 @@ export default {
 	margin-top: 0.4rem;
 }
 </style>
+
+<style>
+.episode .list-item-content__name {
+	max-width: 100%;
+}
+
+.episode .list-item-content__subname {
+	flex-basis: auto;
+	flex-grow: 0;
+}
+</style>
diff --git a/src/components/Player/Volume.vue b/src/components/Player/Volume.vue
index cadbc00..cb7ef90 100644
--- a/src/components/Player/Volume.vue
+++ b/src/components/Player/Volume.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="root">
+	<div>
 		<VolumeHighIcon
 			v-if="volume > 0.7"
 			class="pointer"
@@ -21,7 +21,6 @@
 			:size="30"
 			@click="setVolume(volumeMuted)" />
 		<input
-			class="volume"
 			max="1"
 			min="0"
 			step="0.1"
@@ -64,19 +63,19 @@ export default {
 </script>
 
 <style scoped>
-.pointer {
-	cursor: pointer;
-}
-
-.root {
+div {
 	align-items: center;
 	display: flex;
 	gap: 5px;
 	justify-content: flex-end;
 }
 
-.volume {
+input {
 	transform: rotate(270deg);
 	width: 4rem;
 }
+
+.pointer {
+	cursor: pointer;
+}
 </style>