From cb6fa29e4b66eab9de929c58746870eb86bd500d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 6 Oct 2026 04:14:39 +0200
Subject: [PATCH] Improved mobile detail pages

---
 app/pages/album/[id].vue         | 73 ++++++++++++++++++++++++++++----
 app/pages/artist/[id]/tracks.vue | 14 ++++++
 2 files changed, 79 insertions(+), 8 deletions(-)

diff --git a/app/pages/album/[id].vue b/app/pages/album/[id].vue
index 5b8175c..ca44aea 100644
--- a/app/pages/album/[id].vue
+++ b/app/pages/album/[id].vue
@@ -17,12 +17,14 @@ useHead({ title: computed(() => albumData.value ? `${albumData.value.name} - Alb
 
 <template>
 	<section class="info" v-if="albumData">
-		<NuxtImg
-			:src="GET_FILE(albumData.file)"
-			width="300"
-			height="300"
-			placeholder
-		/>
+		<div class="album-art">
+			<NuxtImg
+				:src="GET_FILE(albumData.file)"
+				width="300"
+				height="300"
+				placeholder
+			/>
+		</div>
 
 		<div class="details">
 			<h1>{{ albumData.name }}</h1>
@@ -31,13 +33,15 @@ useHead({ title: computed(() => albumData.value ? `${albumData.value.name} - Alb
 			<div class="buttons">
 				<Button
 					icon-name="lucide:play"
+					:aria-label="`Play ${albumData.name}`"
 					@click="() => playAlbum(tracks)"
-					>Play</Button
+					><span class="button-label">Play</span></Button
 				>
 				<Button
 					icon-name="lucide:shuffle"
+					:aria-label="`Shuffle ${albumData.name}`"
 					@click="() => playShuffledAlbum(tracks)"
-					>Shuffle</Button
+					><span class="button-label">Shuffle</span></Button
 				>
 			</div>
 		</div>
@@ -97,4 +101,57 @@ useHead({ title: computed(() => albumData.value ? `${albumData.value.name} - Alb
 	flex-direction: column;
 	gap: 0.4rem;
 }
+
+@media (max-width: 767px) {
+	.info {
+		flex-direction: column;
+		align-items: stretch;
+		gap: 0.25rem;
+		margin-bottom: 1rem;
+
+		.album-art {
+			padding: 0.5rem;
+
+			img {
+				display: block;
+				width: 100%;
+				height: auto;
+			}
+		}
+	}
+
+	.info .details {
+		align-items: center;
+		padding-top: 0;
+		text-align: center;
+
+		h1 {
+			margin: 0;
+			@include util.fontSize(26px);
+			line-height: 1.2;
+		}
+
+		.artist {
+			@include util.fontSize(16px);
+		}
+
+		.buttons {
+			margin-top: 0.375rem;
+			gap: 0.75rem;
+		}
+	}
+
+	.details .buttons :deep(.button) {
+		padding: 0.75rem;
+		border-radius: 50%;
+	}
+
+	.details .buttons :deep(.icon-wrapper) {
+		font-size: 1.5rem;
+	}
+
+	.details .buttons :deep(.button-label) {
+		display: none;
+	}
+}
 </style>
diff --git a/app/pages/artist/[id]/tracks.vue b/app/pages/artist/[id]/tracks.vue
index 294f50f..ceee936 100644
--- a/app/pages/artist/[id]/tracks.vue
+++ b/app/pages/artist/[id]/tracks.vue
@@ -21,6 +21,7 @@ useHead({ title: "Artist Songs" })
 			:track="track"
 			:index="i"
 			show-image
+			touch-friendly
 			@play-album-at-index="() => playAlbumAtIndex(tracks, i)"
 		/>
 	</section>
@@ -41,4 +42,17 @@ useHead({ title: "Artist Songs" })
 
 	margin-bottom: 1.5rem;
 }
+
+@media (max-width: 767px) {
+	.title {
+		@include fontSize(26px);
+		margin-bottom: 1rem;
+	}
+
+	.tracks :deep(.track.image) {
+		grid-template-columns: 40px minmax(0, 1fr) auto auto;
+		gap: 0.5rem;
+		padding-inline: 0.5rem;
+	}
+}
 </style>