From 603620a41855a708f6fd820b757008055ba04530 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 5 Apr 2026 14:33:16 +0200
Subject: [PATCH] Made track display be in middle if no lyrics are found

---
 app/components/Player/Fullscreen.vue              | 15 ++++++++++++---
 app/components/Player/Fullscreen/TrackDisplay.vue |  2 ++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index ea074f0..7404194 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -46,7 +46,7 @@ nuxtApp.hook("page:finish", () => {
 			/>
 		</template>
 
-		<section class="screen-container">
+		<section class="screen-container" v-if="song">
 			<Icon
 				name="lucide:x"
 				class="close-btn"
@@ -54,7 +54,7 @@ nuxtApp.hook("page:finish", () => {
 				@click="fullscreen = false"
 			/>
 
-			<div class="content-container">
+			<div class="content-container" :class="{ lyrics: song.lyrics }">
 				<PlayerFullscreenTrackDisplay
 					:show-buttons="mouseMovedRecently"
 				/>
@@ -130,13 +130,22 @@ nuxtApp.hook("page:finish", () => {
 	margin: 0 auto;
 
 	display: grid;
-	grid-template-columns: 500px 1fr;
+	grid-template-columns: 1fr;
 	gap: 110px;
 
 	align-items: center;
 
 	& > * {
 		max-height: 675px;
+		margin: 0 auto;
+	}
+
+	&.lyrics {
+		grid-template-columns: 500px 1fr;
+
+		& > * {
+			margin: initial;
+		}
 	}
 }
 </style>
diff --git a/app/components/Player/Fullscreen/TrackDisplay.vue b/app/components/Player/Fullscreen/TrackDisplay.vue
index 9fc3180..0efdfeb 100644
--- a/app/components/Player/Fullscreen/TrackDisplay.vue
+++ b/app/components/Player/Fullscreen/TrackDisplay.vue
@@ -78,6 +78,8 @@ const durationFormatted = computed(() =>
 	flex-direction: column;
 	align-items: center;
 	gap: 1rem;
+
+	max-width: 500px;
 }
 
 .cover {